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

问题描述

似乎 Google Chrome 最近有一个更新，在执行 transform: 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);
  }
}

如果您在 Chrome 中访问 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屋！