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

问题描述

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

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

首先介绍一下背景.我正在开发的网站使用基于 JavaScript 的滑块"动画.

First some background. The site I'm working on uses a JavaScript-based 'slider' animation.

我正在使用 -webkit-transform: translate3d 为实际动画提供动力".与基于 JavaScript 的方法不同，使用此方法时，一旦内容被动画化，文本就会变得模糊.这在 iPhone 上尤为明显.

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-smoothing: antialiased 添加了规则，我也这样做了.两者都没有改变.

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.

推荐答案

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

As @Robert mentioned above, sometimes adding background helps, but not always.

因此，对于 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;

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