Flexslider really messing up my webpage in Chrome

Question

has anyone else had this kind of issue? I've got a drop down menu at the top of my page, then flexslider, then some general text and images...there are two fonts, one called from the Google fonts API and one using fontFace (just in case this is relevant!)..

When viewing in Chrome on my mac I get some very odd behavior. All the text on the page gets very "thin" each time the slides move, and some (but not all) navigation link "jump" up and right by a pixel. I've seen nothing like this and can only assume it's some weird conflict?? I've tested in everything I can find, FF, Opera, Safari and Chrome on the mac, IE9, Chrome on Windows and FF on Windows. Both versions of Chrome do not look good, but the mac one is much worse.

Unfortunately I'd rather not list my project on the web until it's 100% complete, and I think it's way too much stuff to make a fiddle..but after looking on the actual flexslider web page I found the same kind of fault, if you watch the thumbnails you'll see what I mean (if you're in Chrome of course). - http://flexslider.woothemes.com/thumbnail-controlnav.html

Does anyone know a fix because I'd like to keep the code I've been working on!

Answer 1

Found a fix that seems to resolve the problem in Chrome without touching the JS:

The -webkit-backface-visibility combined with useCSS:true in the slider init causes fixed positioning and z-indexing to break under Chrome. I realized the weirdness was happening when I started playing around with the fixed top navbar, the slider container and z-index values -- setting the z-index higher than the fixed navbar made the odd text blinks go away but of course the slider then scrolled on top of the fixed navbar.

To work around this, do the following two things:

• In "flexslider.css" line 25: .flexslider .slides > li Comment out or remove -webkit-backface-visibility: hidden;
• In the flexslider initialization script: Specify 'useCSS : false' in your slider options*

*This is set to true as a default by the flexslider JS and tells the browser to use CSS3 3D transforms if they're available. An unnecessary feature if you ask me, and flexslider seems to work just fine without it.

Hope this helps!

Answer 2

Apply -webkit-transform: translateZ(0); to the container of the affected element and this will halt the flickring.

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.

Tested on Chrome v27.0.1453.93.