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

Question

似乎Google Chrome最近有一次更新,导致文本模糊后出现问题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变换.

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

Answer 1

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

隐藏背面可见性可以解决问题,因为它将动画简化为对象的正面,而默认状态是正面和背面.

backface-visibility: hidden;

TranslateZ也可以用来为动画添加硬件加速.

transform: translateZ(0);

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

-webkit-font-smoothing: subpixel-antialiased;

他们的动画对象.我发现它可以改变网络字体的渲染,但也可以尝试使用该方法.

Answer 2

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

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

Answer 3

我发现调整比例有所帮助.

使用scale(1.048)over (1.05)似乎可以生成更好的近似整像素字体大小,减少子像素模糊.

我也用过translateZ(0)这似乎调整了Chrome在变换动画中的最终舍入步骤.这对我的onhover用法来说是一个加分,因为它可以提高速度并降低视觉噪音.但是对于onclick函数,我不会使用它,因为转换后的字体看起来不那么脆.

Answer 4

代替

transform: scale(1.5);

运用

zoom : 150%;

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

Answer 5

我找到了一个更好、更干净的解决方案：

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

或者

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

感谢这篇文章： 使用变换防止模糊渲染：缩放

Answer 6

在我的例子中，以下代码导致字体模糊：

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

只需添加缩放属性就可以修复它。尝试缩放，以下对我有用：

zoom: 97%;   

Answer 7

在没有运气的情况下尝试了这里的所有其他功能之后，最终为我解决了此问题的是删除了该will-change: transform;属性。由于某种原因，它在Chrome（而不是Firefox）中造成了令人难以置信的缩放比例。

Answer 8

Sunderls引导我找到答案.除了filter: scale不存在,但filter: blur确实存在.

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

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

它几乎完美无缺." 几乎 "因为我正在使用转换,而在转换过程中,元素看起来并不完美,但是一旦转换完成,它们就会完成.

Answer 9

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

filter: blur(.0px)

Answer 10

我发现，问题以任何方式发生在相对转换上。translationX（50％），scale（1.1）或其他。提供绝对值始终有效（不会产生模糊的文本）。

这里提到的所有解决方案都没有用，而且我认为还没有解决方案（在撰写本文时使用Chrome 62.0.3202.94）。

就我而言，transform: translateY(-50%) translateX(-50%)会导致模糊（我想使对话框居中）。

为了获得更多的“绝对”值，我不得不将十进制值设置为transform: translateY(-50.09%) translateX(-50.09%)。

注意

我很确定，此值在不同的屏幕尺寸上会有所不同。我只是想分享我的经验，以防有人帮助。

Answer 11

我有着同样的问题。我使用以下方法解决了这个问题：

.element {
  display: table
}