다음은 기사의 핵심을 포착하는 몇 가지 질문 기반 제목입니다. 명확하고 간결함: * 본체에 UL이 있는 고정 위치 앵커: Chrome 및 Opera에서 왜 부러지나요? * 사이드바가 사라집니다

본체에 UL이 있는 고정 위치 앵커: Chrome 및 Opera에서 렌더링 문제 해결

렌더링 문제 설명

Google Chrome 및 Opera에서 렌더링 문제가 발생함 고정 위치 사이드바와 본문 내 UL(순서가 지정되지 않은 목록)이 있는 코드를 구현할 때. 특히 앵커 링크를 클릭하면 사이드바가 일시적으로 사라집니다.

Chrome 솔루션

Chrome에서 이 문제를 해결하려면 사이드바에 다음 CSS 속성을 적용하세요.

<code class="css">#sidebar {
  -webkit-transform: translateZ(0);
}</code>

이는 3D 변환을 호출하여 다른 CSS 작업에서 다시 그리기를 분리하고 표시 버그를 해결합니다.

Opera 솔루션

Opera의 경우 다음 CSS 애니메이션을 사용하여 연속 다시 그리기를 강제할 수 있습니다.

<code class="css">@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}</code>

이 솔루션을 사용하면 Opera는 UL 요소가 있음에도 불구하고 사이드바의 고정 위치를 유지하면서 레이아웃 요소를 지속적으로 계산하고 렌더링합니다.

참고

Opera 솔루션을 사용하면 다음이 발생할 수 있습니다. 다시 그릴 때 약간 깜박입니다. 그러나 이는 현재 이 문제에 대한 최적의 솔루션입니다.

추가 고려 사항

DOM 트리 상위에 3D 변환이 있는 경우에도 이 버그의 변형이 발생할 수 있습니다. 이 문제를 방지하려면 먼저 이러한 변환을 제거하세요.

어떤 경우에는 Chrome에서 문제를 해결하기 위해 moveZ(0) 대신 scale3d(1,1,1)를 적용해야 할 수도 있습니다.

위 내용은 다음은 기사의 핵심을 포착하는 몇 가지 질문 기반 제목입니다. 명확하고 간결함: * 본체에 UL이 있는 고정 위치 앵커: Chrome 및 Opera에서 왜 부러지나요? * 사이드바가 사라집니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!