`transform: scale()`을 사용한 후 Chrome에서 내 텍스트가 흐릿해지는 이유는 무엇입니까?

변환 후 Chrome의 텍스트 흐림: scale()

최근 Chrome 업데이트에서 CSS 변환을 사용하여 텍스트를 렌더링하는 특이한 문제가 나타났습니다. : scale() 속성이 흐릿하게 나타납니다. 이 문제는 다음 특정 코드를 사용할 때 관찰되었습니다.

@-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);
  }
}

Chrome에서 rorkery.com을 방문하면 기본 텍스트 영역에 문제가 표시되지만 Safari와 같은 다른 WebKit 브라우저는 영향을 받지 않은 것 같습니다.

흐릿한 텍스트 문제에 대한 해결책

이 문제를 해결하려면 문제가 있는 경우 두 가지 접근 방식을 사용할 수 있습니다.

1. 뒷면 가시성 숨김: 이 기술은 애니메이션을 객체 바로 앞쪽으로 단순화하고 기본값을 제거하여 문제를 해결합니다. 앞과 뒤

   backface-visibility: hidden;

2. 번역Z: 이 해킹은 애니메이션의 하드웨어 가속을 활성화하여 렌더링 문제를 효과적으로 해결합니다.

   transform: translateZ(0);

또한 일부 사용자는 다음 속성을 추가하는 것이 유익하다고 생각합니다.

-webkit-font-smoothing: subpixel-antialiased;

위 내용은 `transform: scale()`을 사용한 후 Chrome에서 내 텍스트가 흐릿해지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!