This blog is about tips
on using Sencha Touch.

Follow it via
RSS or Twitter.


Steffen Hiller is owner & lead developer of 360releases Ltd.,
a Sencha Touch, Ext JS & Ruby on Rails consultancy shop.

You can follow him on Twitter @steffenhiller.

#6 Fixing flickering of animations in PhoneGap

  • February 18, 2011

I'm preparing right now a Sencha Touch application for the release in the Apple App Store and Android Market.

Luckily, the Sencha Touch app ran nicely out of the box in PhoneGap,
except for one little detail.

After a sliding animation you could see a flickering or rather a white blank screen for a split second.

Luckily (again), this is very easy to fix. If you use the slide animation just for your panels within a card layout (e.g. via Ext.TabPanel), just add the following CSS/SCSS code and all will be fine.

.x-panel {
    -webkit-backface-visibility: hidden;
}

I'm using Sencha Touch 1.0.1a and PhoneGap 0.9.4.

Appartently this bug appears for all transitions that set the opacity in CSS, which the slide animation in Sencha Touch does. Credits go to the interesting Performance tips for device page.

That's all.