javascript - 通过 translate3d 基于 Webkit 的模糊/扭曲文本后期动画

Question

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

首先是一些背景。我正在处理的网站使用基于 JavaScript 的“ slider ”动画。

我正在使用 -webkit-transform: translate3d 来“驱动”实际动画。使用此方法时，与基于 JavaScript 的方法相反，一旦内容被动画化，文本就会变得模糊。这在 iPhone 上尤为明显。

我看到的一些解决方法是删除相对定位，我这样做了，并为 -webkit-font-smoothing: antialiased 添加了一个规则，我也这样做了。这两种变化都没有丝毫影响。

唯一我可以在没有模糊文本的情况下正常工作的方法是为动画使用常规 JavaScript 并完全绕过 translate3d。我更喜欢使用 translate3d，因为它在支持 WebKit 的设备上执行速度多，但对于我的生活，我无法弄清楚为什么它会影响文本一个糟糕的方式。

如有任何建议或解决方案，我们将不胜感激。

Answer 1

这些似乎都不适合我，但我发现了一个有点脏的解决方案，似乎可以解决问题:

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);