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