CODEWITHSUNDEEP
htmlcsscss-transitions
spops
spops

Reputation: 676

Alternative to "-webkit-backface-visibility:hidden" to stop flicker

I've been using -webkit-backface-visibility: hidden; to stop css transitions from flickering, but as a consequence my position: fixed; is no longer fixed in FF or Safari (see fiddle: http://jsfiddle.net/liguha/ssqksnv0/)

Any alternatives? Preferably without javascript to fix this.

Upvotes: 1

Views: 1641

Answers (1)

Mark
Mark

Reputation: 2549

Fought with this several times. Doing it in the "*, *:before, *:after" may be causing the issue. Trying to get graphics acceleration on any and all elements probably would cause a bit of lag downstream too. box-sizing normally a safe bet, as with margin/padding.

So whats getting animated? Typically if you have a transform going on you'll want to add the preserve-3d, and perspective. Least from a parent/child relation ship you'll want to manage better what layers you setting these values on.

General rule I've used - Container around what I'm animating:

perspective: 800px;

What I'm animating:

backface-visiblity: hidden;
transform: translate3d(0,0,0);
transform-style: preserve-3d;

If I still have flicker issues, I will normally add transform: translateZ(0); to some sub elements I'm animating that are directly flickering.

Its definitely a irritating issue thats span for years now and unfortunately all the tricks/tips age and become depreciated. Check out Google Chrome's console to check re-draws and make sure the whole page isn't re-drawn when you scroll. Typical sign its time for a translateZ(0) on the content of whats animating.

Good luck

Upvotes: 2

Related Questions