[google-chrome] CSS transform 사용 후 흐릿한 텍스트 : scale (); Chrome에서

을 수행 한 후 흐릿한 텍스트를 유발하는 최근 Google 크롬 업데이트가있는 것 같습니다 transform: 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에서 http://rourkery.com 을 방문 하면 기본 텍스트 영역에 문제가 표시됩니다. 이 작업을 수행하는 데 사용되지 않았으며 Safari와 같은 다른 웹킷 브라우저에 영향을 미치지 않는 것 같습니다. 3D 변환과 유사한 문제를 겪고있는 사람들에 대한 다른 게시물이 있지만 이와 같은 2D 변환에 대해서는 아무것도 찾을 수 없습니다.

모든 아이디어를 주시면 감사하겠습니다!

답변

backface-visibility: hidden;

transform: translateZ(0);

-webkit-font-smoothing: subpixel-antialiased;

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

transform: translateZ(0);
backface-visibility: hidden;

transform: scale(1.5);

zoom : 150%;

filter: blur(.0px)

backface-visibility: hidden;
-webkit-filter: blur(0);