5

还有其他人有这种问题吗？我的页面顶部有一个下拉菜单，然后是 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

有谁知道修复，因为我想保留我一直在处理的代码！

4

7 回答 7

17

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

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

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

  • 在“flexslider.css”第 25 行： .flexslider .slides > li 注释掉或删除 -webkit-backface-visibility: hidden;
  • 在 flexslider 初始化脚本中： 在滑块选项中指定' useCSS : false '*

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

希望这可以帮助！

于 2012-11-18T21:48:49.383 回答
17

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

当您在 flexslider 中有一个包含文本的元素时，这也适用。

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

在 Chrome v27.0.1453.93 上测试。

于 2013-05-23T15:51:07.250 回答
5

将 position:relative & z-index:1 添加到 css 文件中的 .flex-viewport

于 2013-02-04T20:35:09.710 回答
1

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

如上：

  • 在“flexslider.css”第 25 行： .flexslider .slides > li 注释掉或删除 -webkit-backface-visibility: hidden;
  • 在 flexslider 初始化脚本中：在滑块选项中指定 'useCSS : false'
  • -webkit-transform：父元素上的 translateZ(0)

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

.flex-viewport {

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

在 Chrome 上为我做到了！希望它可以帮助其他遇到此问题的人。

于 2013-11-28T17:31:43.113 回答
0

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

滑块：FlexSlider 2

浏览器：铬

问题：图像跳出框架

解决方案：

  • 在“flexslider.css”第 25 行： .flexslider .slides > li 注释掉或删除 -webkit-backface-visibility: hidden;
  • 在“jquery.flexslider.js”中：在滑块选项中指定“useCSS：false”
于 2013-05-22T09:31:07.670 回答
0

在 "flexslider.css" 中找到 ".flexslider .slides > li" 注释掉或删除 -webkit-backface-visibility: hidden;

于 2013-05-02T00:14:00.437 回答
0

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

我强烈怀疑问题出在 FlexSlider JS 为推进幻灯片而实现的各种触摸、按键和其他方法上，因为我删除了我的 CSS（包括我对 Google Font API 的 href）和 JS 脚本，以确定 FlexSlider 的 JS似乎是罪魁祸首。好消息是，它与 Bootstrap 响应式 JS 没有冲突，似乎也没有任何其他 CSS 样式。虽然仍在进行故障排除，对不起，我不能提供更多帮助，但至少不仅仅是你。

我将在 FlexSlider 论坛上发布此内容。也许开发人员会在下一个版本中修复这个 Chrome 错误。

铬 v23.0.1271.64

于 2012-11-13T23:27:26.410 回答