jquery - Flexslider 真的搞乱了我在 Chrome 中的网页

Question

还有人遇到过这样的问题吗？我的页面顶部有一个下拉菜单，然后是 flexslider，然后是一些常规文本和图像...有两种字体，一种是从 Google 字体 API 调用的，另一种是使用 fontFace 的(以防万一这是相关的) !)..

当我在 Mac 上的 Chrome 中查看时，我遇到了一些非常奇怪的行为。每次幻灯片移动时，页面上的所有文本都会变得非常“薄”，并且某些(但不是全部)导航链接会向上和向右“跳跃”一个像素。我没见过这样的事情，只能假设这是一些奇怪的冲突？我已经测试了所有我能找到的东西，Mac 上的 FF、Opera、Safari 和 Chrome，Windows 上的 IE9、Chrome 和 Windows 上的 FF。两个版本的 Chrome 看起来都不太好，但 mac 的就差很多。

不幸的是，在我的项目 100% 完成之前，我不想在网上列出我的项目，而且我认为制作 fiddle 的东西太多了..但是在查看实际的 flexslider 网页后，我发现了同样的类型错了，如果你看缩略图你就会明白我的意思(当然如果你在 Chrome 中)。 -http://flexslider.woothemes.com/thumbnail-controlnav.html

有人知道修复方法吗，因为我想保留我一直在处理的代码!

Answer 1

找到了一个修复程序，似乎可以解决 Chrome 中的问题，而无需触及 JS:

slider init 中的 -webkit-backface-visibility 与 useCSS:true 相结合会导致固定定位和 z 索引在 Chrome 下失效。当我开始使用固定顶部导航栏、 slider 容器和 z 索引值时，我意识到奇怪的事情发生了——将 z 索引设置为高于固定导航栏会使奇怪的文本闪烁消失，但 slider 当然会消失滚动到固定导航栏的顶部。

要解决此问题，请执行以下两件事:

• 在“flexslider.css”第 25 行:.flexslider .slides > li注释掉或删除 -webkit-backface-visibility:隐藏；
• 在flexslider初始化脚本中:在 slider 选项中指定“useCSS : false”*

*flexslider JS 默认设置为 true，并告诉浏览器使用 CSS3 3D 转换(如果可用)。如果你问我的话，这是一个不必要的功能，而 flexslider 似乎没有它也能正常工作。

希望这有帮助!