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

Question

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

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

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

注意： 这与缩放元素变得模糊不适的动画不同。 （this issue）

有任何想法，解决方法等吗？

Answer 1

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

旧答案：

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

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

或者：

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

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