小编典典

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

css

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

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

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

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

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

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


阅读 261

收藏
2020-05-16

共1个答案

小编典典

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

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

您需要在需要修复抗锯齿的块周围(或其中)添加以下样式:

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