Search code examples
jqueryanimationbackgroundflexslider

Weird flickering background with multiple flex sliders on page

I have a website that is 1-page and has multiple sections, each containing a content DIV and a flexslider. On larger screens, there seems to be a weird bug that's causing the backgrounds to flicker with the slide animation, in action here: http://yyy.comuf.com/PORT/

I think it's because there are multiple flexsliders on the page, but not sure of the best way to fix it.

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>

Both sliders are currently the same except different images.

Main JS file is here: http://yyy.comuf.com/PORT/js/jquery.flexslider.js

Solution

  • It's a problem due to many bug in css3 3d transformations, you can use the new parameter

    useCSS:false

    included in the new plugin version. This options forces new browsers (webkit one, that implements css transformations) to use jquery 4 animation. I solved this way. I face this problem only with Chrome, version 21, but not with Safari 6.