Google Chrome 및 Opera에서 앵커 및 UL 목록의 위치 지정 문제 해결

이 문서는 Google Chrome 및 Opera 브라우저에서 발견되는 렌더링 문제를 해결합니다. 페이지 내의 앵커 링크를 클릭하면 고정 위치 사이드바가 사라질 수 있습니다. 페이지에

요소가 있으면 이 문제가 더욱 악화됩니다.

Chrome 솔루션

고정 사이드바에 -webkit-transform:translateZ(0) 속성 적용 요소는 Chrome에서 이 문제를 해결합니다. 이 기술은 3D 변환을 수행할 때 다시 그리기와 CSS 렌더링의 분리를 활용하여 디스플레이 결함을 완화합니다.

#sidebar {
    -webkit-transform: translateZ(0);
}

Opera 솔루션

Opera에서 이 문제를 해결하려면 다른 접근 방식이 필요합니다. 우리는 @keyframes 애니메이션을 사용하여 레이아웃에 영향을 주지만 페이지 모양에는 실질적인 영향을 주지 않는 CSS 속성에 대해 지속적인 다시 그리기를 강제합니다. 이 경우 margin-bottom 속성에 애니메이션을 적용합니다:

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

이 솔루션은 완벽하지 않다는 점에 유의하는 것이 중요합니다. 경우에 따라 사이드바의 위치가 상실되고 빠르게 다시 그려질 때 잠깐 깜박이는 현상이 발생할 수 있습니다. 다시 그리기 간의 Opera 고유 동작으로 인해 이 문제가 발생합니다.

추가 고려 사항

이 버그가 이후에 발생하면 3D 변환이 이미 적용된 경우에 자주 발생하는 것으로 나타났습니다. 본문 또는 상위 요소. GPU 렌더링을 적용하는 데 자주 사용되는 이 방법은 지속적인 렌더링 문제를 일으킬 수 있습니다. 위에 제공된 솔루션을 구현하기 전에 기존 3D 변환을 제거하는 것이 좋습니다.

Google Chrome과 Opera는 이제 향상된 안정성으로 고정 위치 지정을 처리합니다. 이러한 수정 사항은 페이지에서 UL 요소 사용과 관련된 렌더링 문제를 해결하는 데 있어 효율성을 입증했습니다.