Webkit - 使用 css 转换时文本变得不清晰（翻译）答案

【问题标题】：Webkit - Text becomes unsharp when using css transform (translate)Webkit - 使用 css 转换时文本变得不清晰（翻译）
【发布时间】：2014-01-20 08:56:11
【问题描述】：

我的 webkit 转换有问题。

Without -webkit-backface-visibility:hidden

...当我翻译（例如：-webkit-transform: translate(80%,0)）一个对象时，我页面上的许多对象都在闪烁

和

With -webkit-backface-visibility:hidden

...问题是，当我移动父级时，子级->文本变得不清晰（例如：-webkit-transform: translate(80%,0)）。当 transform->translate-value 再次为 (0,0) 时，它再次变得尖锐。

有人知道如何解决这个问题吗？

信息：Windows、Chrome 31.0 xxx、

【问题讨论】：

标签： html css webkit transform translate-animation

【解决方案1】：

根据this post。将以下内容添加到正在动画的元素应该可以解决问题。

.element {
    -webkit-transform: translateZ(0);
}

我从未使用过它，所以我不知道它会对页面性能和兼容性产生什么影响，但祈祷吧，它会解决你的问题。

【讨论】：