Geek Answers Handbook

A strange flickering background with several sliders on the page

I have a website that is 1 page and has several sections, each of which contains DIV and flexslider content. On the big screens, it seems like a strange error, due to which the backgrounds flicker with the animation of the slides: here http://yyy.comuf.com/PORT/ p>

I think this is because there are several flexsliders on the page, but are not sure how 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 for different images.

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

+4
source share
2 answers

This is a problem due to the large number of errors in css3 3d transforms, you can use the new parameter

useCSS false

included in the new version of the plugin. These parameters force new browsers (webkit one that implement css transforms) to use jquery 4 animation. I decided this way. I ran into this problem only with Chrome, version 21, but not with Safari 6.

+3
source

Another option is to use

 -webkit-transform: translateZ(0);

Apply it to the container element.

I found the answer here: fooobar.com/questions/1132354 / ...

And it worked great for me. It also means that you can use cssTransitions, which from what I understand are less time consuming on mobile devices.

+3
source

More articles:


All Articles