使用CSS变换后模糊的文本:scale(); 在Chrome中

似乎Google Chrome最近有一个更新,在进行transform: scale()后会导致模糊的文本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变换类似的问题的其他post,但没有find像这样的2D变换的任何东西。

任何想法将不胜感激,谢谢!

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

隐藏背面可见性可以修复问题,因为它将animation简化为对象的前面,而默认状态是正面和背面。

 backface-visibility: hidden; 

TranslateZ也可以工作,因为它是一种向硬件添加硬件加速的function。

 transform: translateZ(0); 

这两个属性都可以解决您遇到的问题,但有些人也喜欢添加

 -webkit-font-smoothing: subpixel-antialiased; 

以他们的animation来反对。 我发现它可以改变一个网页字体的渲染,但也可以自由地尝试这种方法。

代替

 transform: scale(1.5); 

运用

 zoom : 150%; 

修复了Chrome中的文字模糊问题。

桑德尔斯引导我回答。 除了filter: scale不存在,但是filter: blur

将下一个声明应用于显得模糊的元素(在我的情况下,它们是在一个变形的元素中):

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

几乎完美的工作。 “ 几乎 ”是因为我正在使用一个转换,而在转换时,元素看起来并不完美,但是一旦转换完成,他们就会这样做。

我发现调整比例有一点帮助。

使用scale(1.048) (1.05)似乎可以更好地逼近整像素字体大小,从而减less亚像素模糊。

我也使用了translateZ(0) ,它似乎调整了Chrome在转换animation中的最后舍入步骤。 这对我的onhover使用是一个加号,因为它提高了速度,并减less了视觉噪音。 但是,对于一个onclick函数,我不会使用它,因为经过转换的字体看起来不够脆。

这必须是Chrome(版本56.0.2924.87)的一个错误,但下面修改了在控制台('。0')中更改CSS属性时的模糊。 我会报告。

 filter: blur(.0px) 

尝试使用zoom: 101%; 对于复杂的devise,当你不能使用缩放比例的组合。

为了改善模糊性,尤其是 在Chrome上,请尝试这样做:

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

在我的情况下,下面的代码造成模糊的字体:

 -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); 

而只是添加缩放属性固定它给我。 玩变焦,下面为我工作:

 zoom: 97%; 

如果正在翻译的元素具有奇数个像素的高度,那么补充说明这个问题是很重要的。 因此,如果您可以控制元素的高度,将其设置为偶数就可以使内容变得清晰

对我来说,问题是我的元素使用transformStyle: preserve-3d 。 我意识到,这不是实际需要的应用程序,并删除它固定模糊。

以上都没有为我工作。 我有这个animationpopup:

 @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } 

在我的情况下,应用这个规则后,模糊的效果消失了: -webkit-perspective: 1000; 即使它在Chrome检查器中被标记为未使用。

我find了一个更好更干净的解决scheme:

 .element{ transform:scale(0.5) transform-origin: 100% 0; } 

要么

 .element{ transform:scale(0.5) transform-origin: 0% 0; } 

感谢这篇文章: 防止使用transform:scale进行模糊渲染

你可以使用CSS filter来解决这个问题。

 .element { filter: blur(0); } 

关于vendor-prefix,请自行完成。 -webkit-filter-ms-filter 。 细节在这里http://browser.colla.me/show/css_transformation_scale_cause_blurring