Question

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

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

Normal image

When sliding

Answer 1

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

你无法真正做很多事情。如果要继续使用css转换，则需要更改浏览器对文本进行抗锯齿处理的方式。您可以通过添加以下内容强制它使用skinnier版本（我认为它是“普通”抗锯齿，而不是子像素）：

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

这样，在添加CSS变换时，它不会改变渲染文本的方式。

Answer 2

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

Answer 3

这个问题有一个简单的解决方案。例如，您有一个图片滑块，它会更改文字渲染，只需使用 Slider-Div。下面的 CSS代码

position: relative; 
z-index: 1;

多数民众赞成：）

Answer 4

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

Answer 5

我必须同意其他答案，添加一些代码会有用，如果失败，如果flex滑块使用css3过渡，你可以尝试-webkit-transform：translateZ（0）;在正在改变别名的文本元素上，这帮助我修复了一个类似的问题，我遇到了另一个名为Fotorama.js的js滑块插件