通过Translation3D基于Webkit的模糊/扭曲文本后动画

Question

此问题似乎会影响所有基于WebKit的浏览器，包括iPhone。

首先介绍一些背景。我正在工作的网站使用基于JavaScript的“滑块”动画。

我-webkit-transform: translate3d用来为实际动画“加电”。与基于JavaScript的方法相比，使用此方法时，一旦对内容进行动画处理，文本就会变得模糊。这在iPhone上尤其明显。

我看到的一些解决方法是删除一个相对位置（我做了），并添加了一个规则（-webkit-font-smoothing: antialiased我也做了）。两种变化都没有丝毫差别。

我可以在没有模糊文本的情况下正常工作的 唯一
方法是对动画使用常规的JavaScript并translate3d完全绕开。我更喜欢使用translate3d它，因为它在启用WebKit的设备上执行起来
要 快得多，但是对于我来说，我无法弄清楚为什么它以如此糟糕的方式影响文本。

任何建议或解决方案将不胜感激。

Answer 1

正如@Robert上面提到的，有时添加背景会有所帮助，但并非总是如此。

因此，对于示例Dmitry添加的内容，这不是唯一要做的事情：除后台操作外，您必须告诉浏览器显式使用正确的抗锯齿功能

您需要在需要修复抗锯齿的块周围（或其中）添加以下样式：

background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;