Here's a solution for everyone having issues with possible flickering on Chrome and Opera or any other webkit browser when the slider for some reason mess up entire website (in graphic way).

This also works when you have an element within the flexslider that contains text.

CSS transforms still cause some strange behavior. Forcing the element to render as 3D seems to solve for graphic and performance glitches.

So all you need to do is pretty much to apply this -webkit-transform: translateZ(0); to your theme's CSS file.

So for example I applied it to Body:

body {
-webkit-transform: translateZ(0);

Refresh, clear caches if needed and enjoy.

I'm posting this because I found threads about asking for this, but all closed due to 'won't fix' or 'cannot reproduce'. Related links to the issue:



fatmarker’s picture

Quick Google search lead me here and I was surprised to find it to be the solution. Self-help in less than a minute. Thank you!

Edit: However, after trying this I discovered that adding this to the body tag caused positioning problems with all fixed elements. Rather use it on the .flexslider class. This fixes the flickering and leaves everything else alone:

.flexslider {
-webkit-transform: translateZ(0);
truyenle’s picture

Won't work for me. In addition, for chrome, it ignore -webkit-transform: translateZ(0);
but transform: translateZ(0);
Even that, still doesn't work, I still get flicker on loading.