Question

还有其他人有过这种问题吗？我的页面顶部有一个下拉菜单，然后是flexslider，然后是一些常规文本和图像......有两种字体，一种是使用Google字体API调用的，另一种是使用fontFace（以防这是相关的）！）..

在我的Mac上使用Chrome浏览器时，我会遇到一些非常奇怪的行为。每次幻灯片移动时，页面上的所有文本都会变得非常“瘦”，并且一些（但不是全部）导航链接会向上和向右“跳跃”一个像素。我没有看到这样的东西，只能假设它是一些奇怪的冲突？我已经测试了我能找到的所有东西，包括Mac上的FF，Opera，Safari和Chrome，IE9，Windows上的Chrome和Windows上的FF。两个版本的Chrome看起来都不太好，但是mac版本更差。

不幸的是，我宁愿不在网上列出我的项目，直到100％完成，而且我觉得制作小提琴的方式太多了。但是在查看实际的flexslider网页后，我发现了同样的错误，如果你看缩略图，你会看到我的意思（如果你当然在Chrome中）。 - http://flexslider.woothemes.com/thumbnail-controlnav.html

有没有人知道修复，因为我想保留我一直在努力的代码！

Answer 1

找到了一个似乎可以在不触及JS的情况下解决Chrome中的问题的修复程序：

-webkit-backface-visibility 与滑块初始化中的 useCSS：true 相结合，导致固定定位和z-indexing在Chrome下中断。当我开始使用固定的顶部导航栏，滑块容器和z-index值时，我意识到这种奇怪现象正在发生 - 将z-index设置为高于固定导航栏使奇数文本闪烁消失但当然滑块然后滚动在固定导航栏的顶部。

要解决此问题，请执行以下两项操作：

在“flexslider.css”第25行： .flexslider .slides＆gt;利注释或删除 -webkit-backface-visibility：hidden;

在flexslider初始化脚本中： 在滑块选项中指定' useCSS：false '*

* flexslider JS默认设置为true，并告诉浏览器使用CSS3 3D变换（如果可用）。如果你问我一个不必要的功能，flexslider似乎没有它就可以正常工作。

希望这有帮助！

Answer 2

应用-webkit-transform：translateZ（0）;到受影响元素的容器，这将停止闪烁。

当flexslider中包含文本的元素时，这也适用。

CSS转换仍然会导致一些奇怪的行为。强制元素渲染为3D似乎解决了图形和性能故障。

在Chrome v27.0.1453.93上测试。

Answer 3

添加职位：亲属＆amp; z-index：css文件中的1到.flex-viewport

Answer 4

我知道这已经过时了，但我想我会在摆弄一小时之后快速发布我的解决方案。

如上所述：

在“flexslider.css”第25行：.flexslider .slides＆gt;李评论或 remove -webkit-backface-visibility：hidden;
在flexslider初始化脚本中：在滑块选项
-webkit-transform：父元素

然后将其添加到“flexslider.css”的底部：

.flex-viewport {

    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

这在Chrome上为我做了！希望它可以帮助其他人解决这个问题。

Answer 5

我遇到了完全相同的问题，今天刚刚将FlexSlider实施到Bootstrap响应式网站中。这个问题不会在Firefox或Safari上复制（尚未检查IE，也不是特别想要）。

我强烈怀疑问题在于FlexSlider JS为推进幻灯片放映所采用的各种触摸，按键和其他方法，因为我逐一删除了我的CSS（包括我的href到Google Font API）和JS脚本以确定FlexSlider的JS似乎是罪魁祸首。好消息是，它不是与Bootstrap响应式JS的冲突，也不是任何其他CSS样式。尽管如此，仍然在排除故障，对不起，我不能提供更多帮助，但至少不仅仅是你。

我将在FlexSlider论坛上发布此内容。也许开发人员将在下一版本中解决此Chrome错误的修复问题。

Chrome v23.0.1271.64

Answer 6

＆＃34; flexslider.css＆＃34; find＆＃34; .flexslider .slides＆gt;李＆＃34;注释掉或删除-webkit-backface-visibility：hidden;

Answer 7

gruntPi9建议的解决方案对我有用。我在Chrome中遇到了问题，图像跳出了框架，他的解决方案解决了这个问题。

Slider：FlexSlider 2

浏览器：Chrome

问题：图像跳出框架

解决方案：

在“flexslider.css”第25行：.flexslider .slides＆gt; li注释掉或删除-webkit-backface-visibility：hidden;
在“jquery.flexslider.js”中：在滑块选项中指定“useCSS：false”

Flexslider真的搞砸了Chrome中的网页

7 个答案: