Question

我有一个1页的网站，有多个部分，每个部分都包含一个内容DIV和一个flexslider。在较大的屏幕上，似乎有一个奇怪的错误，导致背景闪烁幻灯片动画，在这里采取行动：http://yyy.comuf.com/PORT/

我认为这是因为页面上有多个flexsliders，但不确定修复它的最佳方法。

JS

  $(window).load(function() {
$('#main-slider').flexslider({
  animation: 'slide',
  controlsContainer: '.flex-container'
});

$('#secondary-slider').flexslider();

}）;

HTML SLIDER-1

<div id="main-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/FP1.png" />
    </li>
    <li>
      <img src="img/abcd.png" />
    </li>
    <li>
      <img src="img/i-eg.png" />
    </li>
  </ul>
</div>

HTML SLIDER-2

<div id="secondary-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/OU.png" />
    </li>
    <li>
      <img src="img/OU1.png" />
    </li>
    <li>
      <img src="img/OU2.png" />
    </li>
  </ul>
</div>

除了不同的图像，两个滑块目前都是相同的。

主要的JS文件在这里：http://yyy.comuf.com/PORT/js/jquery.flexslider.js

Answer 1

由于css3 3d转换中的许多错误，这是一个问题，你可以使用新的参数

<强> useCSS：假

包含在新的插件版本中。此选项强制新浏览器（实现css转换的webkit）使用jquery 4动画。我这样解决了。我只在Chrome 21版本中遇到此问题，但在Safari 6中却没有。

Answer 2

另一种选择是使用

-webkit-transform: translateZ(0);

将其应用于容器元素。

我在这里找到答案： https://stackoverflow.com/a/16718476/1031184

它对我来说非常合适。这也意味着你可以使用cssTransitions，据我所知，它在移动设备上的资源较少。

奇怪的闪烁背景与页面上的多个柔性滑块

2 个答案: