javascript - 滑动图像时 Chrome 渲染错误

Question

我正在使用一个名为 Flexslider 的 JS slider ，并且发现了一个奇怪的文本呈现问题。当图像切换到下一个时，Google Chrome(Windows/OSX)似乎会更改网页上所有文本元素的字体粗细。 FF/IE 中不会出现此问题。

你知道为什么会这样吗？我试过使用不同的字体但没有成功。请查看我的示例屏幕截图以了解不同之处。

Answer 1

这绝对是因为 slider 脚本使用了硬件加速的 css 转换。众所周知，当应用于 webkit 时，即使是不相关的元素也会改变抗锯齿技术。这是一个证明它的演示:http://jsfiddle.net/378pN/

你真的不能做太多。如果您想继续使用 css 转换，您将需要更改浏览器消除文本锯齿的方式。您可以通过添加以下内容强制它使用更瘦的版本(我认为这是“正常”抗锯齿，而不是子像素):

html{-webkit-font-smoothing: antialiased;}

演示:http://jsfiddle.net/378pN/1/

这样它就不会在添加 CSS 转换时改变呈现文本的方式。