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.

  • Jip Spinnewijn

    You sir, are my hero.

  • Pataar

    Thank you so much, you made my day.

  • http://www.twitter.com/frontmesh Vladimir Vujosevic

    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.