Chrome에서 CSS 전환 이미지가 흐릿하거나 1px 이동하는 이유는 무엇입니까?

Chrome CSS 전환 이미지 흐리게 또는 1픽셀 이동

CSS 전환을 사용하여 div를 이동할 때 일반적인 문제가 발생합니다. 즉, div 내의 이미지입니다. 흐릿해지거나 약간 이동합니다. 이 특이한 동작은 전환에 번역이 포함되고 페이지에 스크롤 막대가 포함된 경우에만 발생합니다.

이 문제를 해결하려면 영향을 받은 div에 다음 CSS 속성을 구현할 수 있습니다.

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

By 그렇게 하면 분할이 보다 "2D"로 보이게 됩니다. 각 속성의 목적에 대한 설명은 다음과 같습니다.

• -webkit-backface-visibility: Hidden: 이 속성은 일반적으로 뒤집기를 허용하기 위해 기본적으로 그려지는 분할의 뒷면을 숨깁니다. 그리고 회전 효과. 간단한 번역만 수행하므로 뒷면을 숨기면 불필요한 렌더링이 제거됩니다.
• -webkit-transform: TranslateZ(0) scale(1, 1): 이 속성은 Z- 축을 0으로 변환하여 3D 공간의 구분을 효과적으로 평탄화합니다. Chrome은 이 속성을 기본적으로 처리하지만 이전 Chromium 버전과의 호환성을 위해 -webkit- 접두사가 포함되어 있습니다.

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