Flexslider really messing up my webpage in Chrome

Asked 27/10, 2012 at 16:6 Answered 28/11, 2013 at 17:31

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!

Lowlife answered 27/10, 2012 at 16:6 Comment(4)

Chrome 22.0.1229.94 win7, Chromium 23.0.1255.0 (154635) linux, MSIE9 win7 - sample page looks the same. Maybe you could post the screenshot. – Unpeg 27/10, 2012 at 16:19

Hi nrodic - it would be hard to capture because it happens for about a second and it reverts to the previous (correct) state... – Lowlife 27/10, 2012 at 16:51

I'm not seeing any issues on Chrome 22.0.1229.94 (Mac). – Galsworthy 27/10, 2012 at 19:0

This seems very changeable. It works ok on my iPad 2 in portrait, but in landscape it effects the navigation text, making it thinner when the slide moves. It's very strange!! – Lowlife 28/10, 2012 at 23:23

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!

Juba answered 18/11, 2012 at 21:48 Comment(3)

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! – Lowlife 22/11, 2012 at 10:12

All I had to do was specify useCSS: false, and it fixed the issue for me. Thanks! Chrome 24.0.1312.56 – Alimentation 30/1, 2013 at 18:46

Likewise - using 'useCSS : false' is all I needed as well. – Punctual 20/11, 2014 at 17:9

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.

Budd answered 23/5, 2013 at 15:51 Comment(6)

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. – Cila 23/5, 2013 at 15:54

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... – Lowlife 10/8, 2013 at 16:14

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! – Phylissphyll 24/9, 2013 at 7:42

Also, newer versions of flexslider.css don't appear to have the -webkit-backface-visibility as stated in another answer. – Bumpy 2/10, 2013 at 16:26

What a ball-ache. Just spent several hours trying debugging this and searching for the solution – Septet 24/2, 2014 at 16:31

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. – Schoolbag 26/3, 2016 at 1:9

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

Petitioner answered 4/2, 2013 at 20:35 Comment(1)

Totally worked for me... at least this fixes messed up (rotated) graphics (while the -webkit-backface-visibility approach did not). – Adz 29/5, 2013 at 9:10

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.

Gardner answered 28/11, 2013 at 17:31 Comment(1)

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. – Lowlife 2/12, 2013 at 14:37

I'm experiencing the exact same issue, having just implemented FlexSlider today into a Bootstrap responsive site. The problem doesn't replicate on Firefox or Safari (haven't checked IE yet and don't particularly want to).

I strongly suspect the problem lies with the various touch, keypress and other methods the FlexSlider JS implements to advance the slideshow, because I removed my CSS (including my href to the Google Font API) and JS scripts one by one to determine that FlexSlider's JS appears to be the culprit. The good news is, it's not a conflict with the Bootstrap responsive JS, nor does it seem to be any other CSS styles. Still troubleshooting though, sorry I can't be more helpful but at least it's not just you.

I'm going to post this on the FlexSlider forum. Maybe the developer will address a fix to this Chrome bug in the next release.

Chrome v23.0.1271.64

Juba answered 13/11, 2012 at 23:27 Comment(0)

In "flexslider.css" find ".flexslider .slides > li" Comment out or remove -webkit-backface-visibility: hidden;

Hoofer answered 2/5, 2013 at 0:14 Comment(0)

The solution that gruntPi9 suggested worked for me. I had a problem in Chrome, images were jumping out of the frame, and his solution solved the problem.

Slider: FlexSlider 2

Browser: Chrome

Problem: Images jumping out of a frame

Solution:

In "flexslider.css" line 25: .flexslider .slides > li comment out or remove -webkit-backface-visibility: hidden;
In "jquery.flexslider.js": Specify 'useCSS : false' in your slider options

Lippi answered 22/5, 2013 at 9:31 Comment(1)

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. – Chondrule 7/4, 2013 at 16:19

Recommended topics

Hot tags