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!

Solution 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!

Solution 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.

Solution 3

Add position:relative & z-index:1 to .flex-viewport in css file

Solution 4

I know this is old, but I thought I'd just quickly post my solution after fiddling around for an hour.

As above:

• 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 option
• -webkit-transform: translateZ(0) on the parent element

Then add this to the bottom of "flexslider.css":

.flex-viewport {

    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

That did it for me on Chrome! Hope it helps anyone else having this problem.

View more solutions

Comments

[Dan]

Thanks, this is very interesting. I'm pretty full on with work but I want to get back to this very soon as my next job is going to need a responsive slider too!

[kukabuka]

All I had to do was specify useCSS: false, and it fixed the issue for me. Thanks! Chrome 24.0.1312.56

[user2254926]

The useCSS : false option fixed the issues I had with jumpy elements. A lot of elements on my page seemed to shift 1 pixel each time the slide animation started or ended.

[Ryan Ore]

This is the only Correct Answer. I swear I thought I was going crazy. The labels on a form were flickering and applying -webkit-transform: translateZ(0); to the <form> tag fixed the problem. Thank you so much.

[Paul Voss]

Totally worked for me... at least this fixes messed up (rotated) graphics (while the -webkit-backface-visibility approach did not).

[Dan]

This is very interesting. I've been doing more work with CSS3 animation techniques lately, and will try this. I've viewed several websites now where some of the content "jumps" a pixel or two when a single element is animating. Safari doesn't seem to do this for me...

[Andiih]

I had an issue that drop down menus appeared then faded out until the next slider animation. Chrome only. Didn't seem to be a z-index issue. I applied this to the menu ul which fixed that. Voodoo!

[Admin]

Also, newer versions of flexslider.css don't appear to have the -webkit-backface-visibility as stated in another answer.

[Dan]

That's pretty much the same as setting the UseCSS argument to false. A lot off CSS3 issues are solved using the backface-visibilty property.

[Richard]

What a ball-ache. Just spent several hours trying debugging this and searching for the solution

[jhawes]

Likewise - using 'useCSS : false' is all I needed as well.

[Ron]

I made my own theme with a fixed navbar, worked perfect except on pages that loaded jquery - if jquery was loaded on the page then the fixed navbar would jump a little bit as you scrolled up/down the page. This seems to have fixed it.