Webkit文本别名在CSS3动画中变得很奇怪

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

视频：

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

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

---

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

更新：下面我的旧答案很有效，但只是解决问题的一种简单方法。相反，请阅读本文，了解其他元素受影响的原因：。简而言之：一个动画元素应该通过给它一个

z索引来放置在它自己的堆叠上下文中

旧答案：

它与WebKit相关。老实说，我不知道它为什么会这样，我想这也是一个bug。您可以通过向页面上的任何元素添加任何与3D相关的CSS3声明来防止它。例如：

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

或：

这些声明的存在导致WebKit对动画使用硬件加速，从而防止出现您指出的问题。
WOW。成功了。你到底是怎么知道的？做得好！这似乎也会影响字体的初始抗锯齿。当我设置
-webkit字体平滑：亚像素抗锯齿，这些似乎修改了字体的外观。当与twitter引导一起使用时，此解决方案在右侧提供了一个小滚动条。-webkit背面可见性与背景附件有问题：在chrome中修复了
-webkit背面可见性：隐藏
在chrome中引入了错误38：相关代码在视频中，但我很快会尝试在jsfidle中重新创建它。视频链接不再工作。一个jsfidle演示了这个问题（由提供）。不幸的是，目前似乎没有解决方案，除了将这些元素的字体渲染一直降级为“抗锯齿”，就像下面Ian回答中的技巧一样，或者确保他们和他们的祖先都没有相对/绝对的位置。
body {
    -webkit-backface-visibility: hidden;
}