Google Chrome 및 Opera에서 렌더링 문제가 발생함 고정 위치 사이드바와 본문 내 UL(순서가 지정되지 않은 목록)이 있는 코드를 구현할 때. 특히 앵커 링크를 클릭하면 사이드바가 일시적으로 사라집니다.
Chrome에서 이 문제를 해결하려면 사이드바에 다음 CSS 속성을 적용하세요.
<code class="css">#sidebar { -webkit-transform: translateZ(0); }</code>
이는 3D 변환을 호출하여 다른 CSS 작업에서 다시 그리기를 분리하고 표시 버그를 해결합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!