Chrome 및 Opera에서 앵커 링크를 클릭하면 고정 사이드바가 사라지는 이유는 무엇입니까?

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

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

페이지의 요소가 이 문제를 악화시킵니다.

Chrome 솔루션

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

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

로그인 후 복사

Opera 솔루션

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

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

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

로그인 후 복사

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

추가 고려 사항

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

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

위 내용은 Chrome 및 Opera에서 앵커 링크를 클릭하면 고정 사이드바가 사라지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!