변환 후 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;