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

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

Chrome 및 Opera와 같은 특정 브라우저에서는 위치를 지정하려고 할 때 독특한 렌더링 문제가 발생할 수 있습니다. UL 태그와 함께 고정 요소. 이 문제는 앵커 링크를 클릭하면 수정된 요소가 일시적으로 사라지는 것으로 나타납니다.

근본 원인

이 문제의 근본 원인은 페이지의 요소가 업데이트될 때 이러한 브라우저가 다시 그리기를 처리하는 방식에 기인합니다. . 특히 고정 요소는 다시 그리는 과정에서 일시적으로 위치가 손실될 수 있습니다.

Chrome 솔루션

Chrome에서 이 문제를 해결하려면 문제가 있는 고정 요소에 TranslateZ(0) 변환을 적용하면 됩니다. . 이 작업은 3D 변환을 효과적으로 트리거하여 나머지 CSS 스택에서 다시 그리기 프로세스를 분리하여 위치 지정 문제를 완화합니다.

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

Opera 솔루션

Opera의 경우 약간 다른 접근 방식 필요합니다. 이 경우 레이아웃에 영향을 주지만 요소의 시각적 모양에는 영향을 주지 않는 속성(예: margin-bottom)을 지속적으로 다시 그리는 CSS 애니메이션을 만들 수 있습니다. 이 접근 방식은 Opera가 계속해서 다시 그리기를 수행하도록 속여서 고정 요소의 위치가 유지되도록 합니다.

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

#sidebar {
    animation: noop 1s infinite;
}

참고

이 솔루션은 완벽하지 않을 수 있으며 약간의 결과가 발생할 수 있다는 점에 유의하는 것이 중요합니다. Opera가 고정된 위치를 되찾으려고 시도할 때 깜박입니다. 이러한 제한은 Opera가 다시 그리기 프로세스를 처리하는 방식에 내재되어 있어 시각적 아티팩트를 완전히 제거하기 어렵습니다.

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