jquery - 页面上有多个弹性 slider 的奇怪闪烁背景

Question

我有一个单页网站，有多个部分，每个部分包含一个内容 DIV 和一个 flexslider。在较大的屏幕上，似乎有一个奇怪的错误导致背景随着幻灯片动画而闪烁，具体如下:http://yyy.comuf.com/PORT/

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

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>

两个 slider 目前除了图像不同之外都是相同的。

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

Answer 1

另一种选择是使用

-webkit-transform: translateZ(0);

将其应用到容器元素。

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

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