Multiple Flexsliders causing a weird background flash/flicker

I don’t often use many jQuery plugins, I like building custom widgets and plugins myself – it’s way more fun!  But time and budget doesn’t always allow that, and with the demand for responsive sites these days a great little time saver is to use Flexslider. It’s a pretty rad little slider.

The problemo

I had two sections, each with a large full-screen background image and a slider in each section.  When the first slider transitioned it caused a weird flicker/flash of the background image on the section below in webkit.  Kinda weird right?

The solution!

So the reason this is happening is that Flexslider uses CSS3 transitions to animate from one slide to the next.  This is great, as most front-end devs will know that CSS3 transitions are way better than JS animation, mainly as they’re less resource intensive. It then falls back to jQuery for it’s transitions if CSS3 isn’t supported (cheers IE8).  But due to a bug in CSS3 3D transformations in webkit this is causing some funky stuff to happen.

So to cut to the chase, just tell Flexslider not to use CSS3:

$('.flexslider').flexslider({
useCSS: false
});

I’m loving that the developers allow you to specify that as a parameter.  Nice work Flexslider guys!

12 much appreciated responses...

  1. Michael says:

    John,

    Thanks so much for writing this up. I had the exact same problem and this worked like a charm. You saved me a ton of time!

    -M

  2. mohammed says:

    thanx lol, my problem is solved because of you.

    flashing getting me so crazy

  3. Oscar says:

    Hi, I got two flexsliders on my website, the first one is fine but the second flexslider in
    http://www.cardiorhythmsonline.co.uk/collections/instructor-toolkits
    shows the background, in this case white, between each slide. The white background is only shown as a light flash between each slide.

    I tried to copy and paste your solution but to no avail. Any ideas?

  4. Zeshan Ahmed says:

    Just one word for you, “AWESOME”

  5. Remco Bakker says:

    Thnx for solving my problem!:)

  6. Christian says:

    Great it worked for me!

  7. Kevin Sullivan says:

    I’m experiencing the exact same issue. Please excuse my ignorance but, where exactly do I enter this piece of code?

    • John B says:

      Hey Kevin, you use this code when initiating the flexslider function, as shown in Step 3 of their setup instructions.

  8. niganj says:

    You are awesome

  9. Andrew says:

    Thanks for the tip! Text flicker was driving me batty.

  10. Ivandude says:

    Had this frustrating bug on a client site, used a few other fixes found but this one worked PERFECTLY from the get go. Massive thank you!

  11. Luca says:

    Worked for me immediately. Thanks a lot!!

Feel free to add your comment..

Your email address will not be published.