基于Webkit的模糊/扭曲文本通过translate3d后动画 [英] Webkit-based blurry/distorted text post-animation via translate3d

问题描述

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

This issue appears to affect all WebKit-based browsers, including the iPhone.

第一些背景。我正在使用的网站使用基于JavaScript的滑块动画，基本上是这样：
http://www.assistly.com/product-tour/#/easy-setup

First some background. The site I'm working on uses a JavaScript-based 'slider' animation that is basically identical to this: http://www.assistly.com/product-tour/#/easy-setup

唯一的区别是我使用-webkit-transform：translate3d为'power'的实际动画。当使用此方法时，与基于JavaScript的方法相反，一旦内容被动画化，文本就变得模糊。这在iPhone上是特别明显的。

The only difference is that I'm using -webkit-transform: translate3d to 'power' the actual animation. When using this method, as opposed to a JavaScript-based method, the text becomes all blurry once the content has been animated. This is especially noticeable on the iPhone.

我看到的几个解决方法是删除相对定位，我做，并添加一个规则-webkit-font-平滑：抗锯齿，我也这样做。

A few workarounds I saw were to remove an relative positioning, which I did, and to add a rule for -webkit-font-smoothing: antialiased, which I also did. Neither change made the slightest difference.

只有 我可以使这个工作正常没有模糊的文本是使用常规JavaScript的动画和完全绕过translate3d。我更喜欢使用translate3d，因为它在支持WebKit的设备上执行得更快，但是对于我的生活，我不知道为什么它会以这么糟糕的方式影响文本。

The only way I could make this work properly without blurry text was to use regular JavaScript for the animation and bypass the translate3d altogether. I'd prefer to use translate3d because it performs much faster on WebKit-enabled devices, but for the life of me I cannot figure out why it is affecting the text in such a poor way.

任何建议或解决方案将非常感谢。

Any suggestions or solutions would be greatly appreciated.

推荐答案

因此，对于示例Dmitry补充说，这不是你唯一必须做的事情：除了背景之外，你必须告诉浏览器明确使用正确的抗锯齿，因此，有一个固定的Dmitry的例子： http://jsfiddle.net/PtDVF/1/

So, for the example Dmitry added that's not the only thing you must do: except from the background, you must tell browser to explicitly use the proper anti-aliasing, so, there is a fixed Dmitry's example: http://jsfiddle.net/PtDVF/1/

您需要在需要修复抗锯齿的块（或块）上添加这些样式：

You need to add these styles around (or for the) blocks where you need to fix the anti-aliasing:

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

这篇关于基于Webkit的模糊/扭曲文本通过translate3d后动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！