CSS 변환 후 Chrome의 흐린 텍스트: 뒷면 가시성 숨김 및 TranslateZ(0)으로 해결됨
CSS 변환을 사용하여 텍스트 크기 조정: scale( ) 최신 버전의 Google Chrome에서는 화면이 흐려질 수 있습니다. 이는 변환 후 텍스트가 번져 보이는 http://rourkery.com의 기본 텍스트 영역에서 분명하게 나타납니다.
이 문제에 대한 해결책은 특정 CSS 속성을 사용하는 것입니다. 뒷면 가시성 추가: 숨김은 개체의 앞면에만 초점을 맞춰 애니메이션을 단순화합니다. TranslateZ(0) 속성은 보다 부드러운 애니메이션을 위해 하드웨어 가속을 시뮬레이션합니다.
이러한 속성을 영향을 받는 요소에 통합하면 흐릿함이 효과적으로 제거됩니다. 다음은 스니펫 예입니다.
@-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); backface-visibility: hidden; transform: translateZ(0); } }
명확성을 높이기 위해 일부 개발자는 -webkit-font-smoothing: subpixel-antialiased를 포함하여 글꼴 렌더링을 향상할 수도 있습니다. 그러나 이 속성의 필요성은 다양하며 개인 취향에 따라 다릅니다.
위 내용은 CSS 변환 후 Chrome 텍스트가 흐릿해지는 이유는 무엇이며 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!