Prevent flickering on CSS3 Transitions/Transforms in Webkit

Thanks dude, did the trick for me.

OK!

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. :)