Webkit文本别名在CSS3动画中变得奇怪 [英] Webkit text aliasing gets weird during CSS3 animations

问题描述

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

This is a funky one. And I'm sure it's webkit related since it only seems to be an issue in Chrome Version 20.0.1132.57 and Safari 5.1.7. I've uploaded a short video to explain the issue because it would be nearly impossible to explain via text.

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

Short version：
在CSS3动画期间，位于定位元素（绝对或相对）内的文本似乎会更改其抗锯齿。

Short version: During CSS3 animations, text that is inside a positioned element (absolute or relative) seems to change its antialiasing. It becomes bolder while animations are running.

注意：
这和缩放的元素变得模糊的动画眩晕不一样。 （此问题）

任何想法，解决方法等等。

Any thoughts, workarounds, etc?

推荐答案

更新：只有一个hacky的方法来解决这个问题。相反，请阅读此文章，以了解其他元素受到影响的原因： http://jsbin.com/efirip/5 / quiet 。简而言之：通过给它一个 z-index

Update: My old answer below works but is only a hacky way to resolve the issue. Instead, read this for the reason to why other elements are affected: http://jsbin.com/efirip/5/quiet. In short: an animated element should be placed in its own stacking context by giving it a z-index.

，动画元素应放置在它自己的堆叠上下文中。旧答案：

Old answer:

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

It's WebKit related. Honestly I'm not sure why it does it and I assume it's a bug too. You can prevent it by adding any 3D related CSS3 declaration to any element on the page. Example:

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

或：

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

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

The presence of these declarations causes WebKit to use hardware acceleration for the animations which prevents the problem you've pointed out.

这篇关于Webkit文本别名在CSS3动画中变得奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！