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

Chrome 및 Opera 렌더링 문제: 앵커 클릭 시 고정 위치 요소가 사라짐

제공된 HTML 코드는 오른쪽에 고정 사이드바를 생성하려고 시도합니다. -문서의 손쪽. 그러나

요소가 페이지에 추가되면 앵커 링크를 클릭할 때 고정 사이드바가 가끔 사라질 수 있습니다.

Chrome 솔루션:

Chrome에서 문제를 해결하려면 다음 스타일을 고정 요소에 적용:

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

특정 상황에서 Google Chrome에서는 다시 그리기를 다른 CSS 프로세스와 분리하여 디스플레이 문제를 효과적으로 해결하기 위해 3D 변환을 포함해야 합니다.

Opera 솔루션:

Opera에서 문제를 해결하는 것은 좀 더 복잡합니다. 다음은 지속적인 다시 그리기를 강제하는 솔루션입니다.

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

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

이 애니메이션을 사용하면 Opera가 레이아웃 요소를 지속적으로 다시 계산하고 다시 렌더링하여 고정 위치가 안정적으로 유지되도록 합니다.

참고:

이 솔루션은 대부분의 경우 버그를 효과적으로 해결하지만 Opera가 고정 위치를 다시 설정하려고 시도할 때 가끔 사소한 깜박임이 발생할 수 있습니다.

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