내 CSS 전환이 Chrome에서 이미지를 흐리게 하거나 Div를 이동시키는 이유는 무엇입니까?

Chrome CSS 전환의 흐린 이미지 및 이동된 Div

CSS 전환에서 div에 번역 효과를 적용하면 예상치 못한 결과가 발생할 수 있습니다. 이미지가 흐릿해지거나 이미지가 1픽셀 이동하는 등의 현상이 발생합니다. 이 문제는 페이지에 스크롤 막대가 있을 때 특히 두드러집니다. 이 문제의 원인은 CSS 변환의 본질적인 3차원 특성에 있습니다.

해결책: 평면 렌더링 적용

이 상황을 해결하려면 CSS 속성 -webkit을 사용하세요. -backface-visibility를 div에 적용하여 더 2차원적으로 보이도록 할 수 있습니다. 이 속성은 브라우저가 div의 뒷면을 렌더링하지 않도록 지시하여 모양을 효과적으로 평면화합니다.

또한 -webkit-transform을translateZ(0) scale(1, 1)로 설정하면 div가 그대로 유지됩니다. 동일한 평면과 축척이 올바르게 이루어졌습니다.

업데이트됨 구문:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

div를 평면화함으로써 이러한 CSS 속성은 전환이 div의 3차원 속성을 실수로 조작하는 것을 방지하여 부드럽고 흐려짐 없는 전환을 제공합니다.

위 내용은 내 CSS 전환이 Chrome에서 이미지를 흐리게 하거나 Div를 이동시키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!