Eliminating annoying flicker transitions with jQuery Mobile on Android

I’ve been using PhoneGap along with jQuery Mobile to do some protoyping work for a client on a range of mobile devices.  When testing on Android 2.2 (HTC Desire in my case), I noticed a nasty flicker on the CSS swipe transition. Seems others have seen this too. On my device it seems to occur once at the start of the transition, and once at the end.

Anyways, after much googling, the stackoverflow magic that fixes it seems to be to do with the -webkit-backface-visibility tag. After I added the magic CSS to my jQuery Mobile page tags life was flicker-free again. Here’s the magic sauce I had to add to my CSS when using PhoneGap 0.9.6 and jQuery Mobile 1.0 beta 1:

.ui-page {
    -webkit-backface-visibility: hidden;
}

And say goodnight to the dreaded Android flicker!