使用CSS变换后的模糊文本：scale（）;在Chrome中 [英] Blurry text after using CSS transform: scale(); in Chrome

问题描述

似乎最近对Chrome浏览器进行了更新，导致在执行转换后导致模糊文本：scale（）。具体来说，我这样做：

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale(). Specifically I'm doing this:

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

如果您访问http://rourkery.com ，您应该会在主文字区域看到问题。它没有用于这样做，它似乎并没有影响其他webkit浏览器（如Safari）。还有一些其他帖子，人们遇到类似的问题与3D变换，但是找不到任何关于2d变换像这样。

If you visit http://rourkery.com in Chrome, you should see the problem on the main text area. It didn't used to do this and it doesn't seem to effect other webkit browsers (like Safari). There were some other posts about people experiencing a similar issue with 3d transforms, but can't find anything about 2d transforms like this.

任何想法将不胜感激，谢谢！

Any ideas would be appreciated, thanks!

推荐答案

我有这个问题多次，似乎有2种方法修复它（如下所示）。您可以使用这些属性中的任何一个来修复渲染，或同时修改这两个属性。

I have have this problem a number of times and there seems to be 2 ways of fixing it (shown below). You can use either of these properties to fix the rendering, or both at the same time.

背面可见性隐藏修复了问题，因为它将动画简化为前面的对象，而默认状态是前面和后面。

Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the object, whereas the default state is the front and the back.

backface-visibility: hidden;

TranslateZ还可以用来为动画添加硬件加速。

TranslateZ also works as it is a hack to add hardware acceleration to the animation.

transform: translateZ(0);

这两个属性解决了您遇到的问题，但有些人还想添加

Both of these properties fix the problem that you are having but some people also like to add

-webkit-font-smoothing: subpixel-antialiased;

到他们的动画对象。我发现它可以改变一个网络字体的渲染，但也可以随意尝试该方法。

to their animated to object. I find that it can change the rendering of a web font but feel free to experiment with that method too.

这篇关于使用CSS变换后的模糊文本：scale（）;在Chrome中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！