Upgrading from Android Cordova (PhoneGap) 2.1 to 2.2 Causes Black Screen or Flickering

Recently whilst preparing the release of our TV Guide app, written in Cordova, we were experiencing lots of flickering / tiling as the page was scrolled and on some (HTC) devices the page would just turn black with the following error repeatedly output to the console:

D/TiledPage(28639): ERROR: We don't have enough tiles for this page! nbTilesHeight 0 nbTilesWidth 3

After stripping out and playing around with the usual CSS suspects (TranslateZ(0)), minimising the DOM and removing all images temporarily we were having no luck. So I reverted the entire web asset codebase back to the prior release, but built it against the latest Cordova Android project, and the issue still existed.

With that the case, there was only one possible cause, the upgrade from Cordova 2.1 to 2.2. It turns out the AndroidManifest.xml had been changed to enable hardware acceleration on the whole view. Simply open your AndroidManifest.xml and find this <application> node:

<application android:icon="@drawable/icon" android:label="@string/app_name"
android:hardwareAccelerated="true"
android:debuggable="true">

Remove the line:

android:hardwareAccelerated="true"

Clean and build. Your app should now perform as it did pre-Cordova 2.2. Hurray!