Flickering Sencha Touch Animations on Android
After deploying my project on Android Devices I found out about some annoying bug in Sencha Touch. It causes flickering on Android when using Animations like cardSwitchAnimation: ‘slide.’ All available solutions didn’t seem to fix this issue on my setup completely. I was using a tabBar at the bottom of my application and the icons of it didn’t get rendered when the app loaded for the first time.
The property -webkit-perspective helped me to fix this problem
.x-panel {
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
This was tested with Sencha Touch 1.1.0 and PhoneGap 1.0.0 on Android 2.3.
You sir, are my hero.
Thank you so much, you made my day.
While this is a nice fix for android devices, it causes text to be fuzzy on a iPhone retina display. So, this fix should only be served to android only css.