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

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对动画使用硬件加速,从而防止您指出的问题.