Fixed positioned element flickering

[ghost]

When having a fixed element (such as a top fixed menu bar) and a Flexslider with animation: slide on the same page, the fixed element starts to flicker on scroll as if it can't keep up with the scroll action. This happens only on Safari, and setting the animation to fade solves the issue.

This might be related to issue #26, but setting -webkit-backface-visibility: hidden; does not solve the problem.

[tylernotfound]

Do you have a link to save me some time of recreating your situation?

[ghost]

The site in question isn't live yet, but I've stripped some code and put up a single page example:
http://heliumworkx.com/flexslider/

The issue only happens once you scroll past the Flexslider element. If I comment out the flexslider function, my fixed navigation goes back to normal.

Tested on Safari 5.1.2 (6534.52.7)

[tylernotfound]

I still don't have an answer for this. Translate3d appears to cause random, weird bugs.

[tylernotfound]

Did you ever get this sorted out? I recently worked through an issue with someone that was being caused by -webkit-backface-visbility: hidden. Closing now.

[ghost]

No I haven't found a solution, even though I thoroughly debugged everything. In the end I just set the animation to fade on Safari through browser detection. Not the most elegant solution, but the most convenient one for me at that time.

[tylernotfound]

If you were interested, you could check out the most recent update and try setting useCSS: false on the slider, in conjunction with removing any -webkit-* properties in the CSS. That will make the slider rely on margins, rather than translate3d, and ensure that no webkit specific properties are interfering. I can't imagine any other answer beyond that.

[pehaa]

I had exactly the same problem, indeed setting useCSS: false together with deleting "-webkit-backface-visibility: hidden;" solved the problem. Thanks.

[mtaube]

I also had this exact same problem.

Setting useCSS: false and deleting "-webkit-backface-visibility: hidden;" worked for me as well, but I wish there was another solution :(

I want to useCSS of course!

Thanks for the great slider anyway.

[mtaube]

Just figured out a different solution:

Apply "-webkit-backface-visibility: hidden;" to the fixed positioned element!

That also allows you to revert useCSS to true as well!

[tylernotfound]

That is definitely the best route to go if it doesn't chunk out your text with bad anti-aliasing! :)

[joelpittet]

that last one fixed it for me too, thanks!

[henrik-farre]

just a note: if someone tries to open a jquerymobile popup (from version 1.2.0, Android 3.2) above a flexslider, it's not displayed unless:

.ui-popup-container {
  -webkit-backface-visibility: hidden;
 }

[joelpittet]

I found with the latest version of flexslider on my iphone 4 ios6, adding that webkit-backface-visibility: hidden; caused some dropdown menu to lose it's background on LIs, but good news is after removing it with the latest flexslider, it was magically not needed any futher. Note, when it fixed for me the first time it was iOS 5 but I don't have a test device with this any longer.