CSS 변환 후 Chrome 텍스트가 흐릿해지는 이유는 무엇이며 어떻게 해결할 수 있나요?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!