使用CSS变换后的模糊文本: scale()；在Chrome中
使用CSS变换后的模糊文本: scale()；在Chrome中
提问于 2013-02-04 05:26:05
似乎谷歌浏览器最近有一个更新，在执行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，你应该会在主文本区看到这个问题。它过去不会这样做，而且似乎也不会影响其他的webkit浏览器(比如Safari)。还有其他一些关于人们在3d变换中遇到类似问题的帖子，但找不到任何关于2d变换的东西。
任何想法都将不胜感激，谢谢！
回答 26
Stack Overflow用户
发布于 2013-06-02 08:24:37
我已经遇到这个问题很多次了，似乎有两种方法可以解决它(如下所示)。您可以使用这些属性中的任何一个来修复渲染，或者同时使用这两个属性。
背面可见性隐藏解决了这个问题，因为它将动画简化为对象的正面，而默认状态是正面和背面。
backface-visibility: hidden;TranslateZ也工作，因为它是一个黑客，为动画添加硬件加速。
transform: translateZ(0);这两个属性都解决了您的问题，但有些人还喜欢添加
-webkit-font-smoothing: subpixel-antialiased;添加到它们的动画对象。我发现它可以改变网页字体的呈现方式，但也可以自由地尝试这种方法。
Stack Overflow用户
发布于 2017-02-04 06:46:02
我发现调整比例比例略有帮助。
在(1.05)上使用scale(1.048)似乎更接近于整个像素的字体大小，从而减少了子像素模糊。
我还使用了translateZ(0)，它似乎调整了Chrome在变换动画中的最后一个舍入步骤。这对我的鼠标悬停使用是一个加分，因为它提高了速度并减少了视觉噪音。然而，对于onclick函数，我不会使用它，因为转换后的字体看起来不那么清晰。
Stack Overflow用户
发布于 2015-03-01 03:56:59
而不是
transform: scale(1.5);使用
zoom : 150%;修复了Chrome中的文本模糊问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14677490
复制相关文章
相似问题