css - Webkit 文本别名在 CSS3 动画期间变得奇怪

Question

这是一个时髦的。而且我确定它与 webkit 相关，因为它似乎只是 Chrome 版本 20.0.1132.57 和 Safari 5.1.7 中的问题。我上传了一个简短的视频来解释这个问题，因为几乎不可能通过文字来解释。

视频：http: //youtu.be/0XttO-Diz2g

简短版本： 在 CSS3 动画期间，定位元素（绝对或相对）内的文本似乎会改变其抗锯齿。动画运行时它会变得更粗。

注意： 这与缩放元素在动画中变得模糊不同。（本期）

有什么想法、解决方法等吗？

Answer 1

更新：我下面的旧答案有效，但只是解决问题的一种黑客方式。相反，请阅读此内容以了解其他元素受到影响的原因：http: //jsbin.com/efirip/5/quiet。简而言之：一个动画元素应该通过给它一个z-index.

老答案：

它与 WebKit 相关。老实说，我不确定它为什么会这样做，我认为这也是一个错误。您可以通过向页面上的任何元素添加任何与 3D 相关的 CSS3 声明来阻止它。例子：

body {
    -webkit-transform: translateZ(0);
}

或者：

body {
    -webkit-backface-visibility: hidden;
}

这些声明的存在导致 WebKit 对动画使用硬件加速，从而防止您指出的问题。