Last Updated: October 14, 2016
· ev_rowe

Prevent flickering on CSS3 Transitions/Transforms in Webkit

Add these two properties to prevent flickering effects:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

Apply also to flickering elements which AREN'T being animated for the same fix.

2 Responses
Add your response

Thanks dude, did the trick for me.

over 1 year ago ·


So, the problem i faced was in a custom popup where i had a wheel effect on the cross button using css transition. But that caused flicker issue in the popup.

After visiting various online portals, i got to know that transition property:

-webkit-backface-visibility: hidden;

on the transitioned element really works and stops the flickering. But using this property blurred the whole component (popup) in my case and to stop that, i had to use another property on the root element of the component:

-webkit-transform: translate3d(0, 0, 0);

but as i was using it in a custom popup which was already translated -50% in y-direction to keep it in centre, i was restricted not to use it.

After playing with css properties for days and trying out various solutions, i came to a conclusion that total height of the component in which transitioned element is used must be EVEN and in case of dynamic data, we need to adjust the margins and padding s ion such a way that total height remains EVEN.

This resolved my issue. Just make sure total height remains EVEN and adjust margins and paddings accordingly.

Hope it helps anyone in need too. :)

over 1 year ago ·