滑动图像时 Chrome 渲染错误答案

【问题标题】：Chrome render bug when sliding images滑动图像时 Chrome 渲染错误
【发布时间】：2012-10-26 12:45:39
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

你真的无能为力。如果您想继续使用 css 转换，则需要更改浏览器抗锯齿文本的方式。您可以通过添加以下内容来强制它使用更瘦的版本（我认为这是“正常”抗锯齿，而不是亚像素）：

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

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

【讨论】：

【解决方案2】：

能否请您发布您的代码？它很可能是一个未封闭的标签。也可能是滑块和不断变化的图像正在改变元素的高度，并且它影响了它下面的文本，因为它们只是移动了一点点。

【讨论】：

【解决方案3】：

这个问题有一个简单的解决方案。例如，您有一个 image-slider，它会更改文本渲染，只需将 CSS Codes below 用于 Slider-Div。

position: relative; 
z-index: 1;

就是这样:)

【讨论】：

【解决方案4】：

不看代码，很难判断。我的猜测是没有正确关闭的标签。您应该通过W3 validator 运行您的页面并更正您发现的任何错误。如果仍然存在，您需要提供更多信息。

【讨论】：

【解决方案5】：

我必须同意其他答案，添加一些代码会很有用，如果 flex 滑块使用 css3 转换，您可以尝试 -webkit-transform: translateZ(0);在更改别名的文本元素上，这帮助我解决了我在使用另一个名为 Fotorama.js 的 js 滑块插件时遇到的类似问题

【讨论】：