此问题似乎会影响所有基于WebKit的浏览器,包括iPhone。
首先介绍一些背景。我正在工作的网站使用基于JavaScript的“滑块”动画。
我-webkit-transform: translate3d用来为实际动画“加电”。与基于JavaScript的方法相比,使用此方法时,一旦对内容进行了动画处理,文本就会变得模糊。这在iPhone上尤其明显。
-webkit-transform: translate3d
我看到的一些解决方法是删除我所做的相对定位,并为我添加一条规则-webkit-font-smoothing: antialiased。两种变化都没有丝毫差别。
-webkit-font-smoothing: antialiased
我可以在没有模糊文本的情况下正常工作的 唯一 方法是对动画使用常规的JavaScript并translate3d完全绕开。我更喜欢使用translate3d它,因为它在启用WebKit的设备上执行起来 要 快得多,但是对于我来说,我无法弄清楚为什么它以如此糟糕的方式影响文本。
translate3d
任何建议或解决方案将不胜感激。
正如@Robert上面提到的,有时添加背景会有所帮助,但并非总是如此。
因此,对于示例Dmitry添加的内容,这不是唯一要做的事情:除了后台操作,您必须告诉浏览器显式使用正确的抗锯齿功能,因此,有一个固定的Dmitry示例:
您需要在需要修复抗锯齿的块周围(或其中)添加以下样式:
background: #FFF; /* Or the actual color of your background/applied image */ -webkit-font-smoothing: subpixel-antialiased;