一尘不染

通过translate3d基于Webkit的模糊/变形文本后动画

javascript

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

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

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

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

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

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


阅读 271

收藏
2020-05-01

共1个答案

一尘不染

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

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

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

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