Weird flickering background with multiple flex sliders on page
animation, background, flexslider, jquery
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.
Problem
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