White flash between pages with PhoneGap and jQuery Mobile for mobile app

Question

When navigating between pages using jQuery Mobile and PhoneGap on iPhone, there is an annoying white flash that displays just before the new page loads. A simple link like t

Answer 1

A combination of jQuery Mobile 1.1.0 RC2 (just released) and jQuery 1.7.1 does not suffer from this problem!!! Wonderful. Great work from the jQuery Mobile team. I know this bug was haunting them!

UPDATE:

If you still see a flash, you can drastically improve the user experience by supplying a common body background color in your CSS. For example, if you are using a dark theme, then adding this to your theme's CSS will change the 'white' flash to a 'black' flash:

body{
   background-color: black !important
}

Also, if you could get away without using rel="external" in your links, then the flash will be gone also. Unfortunately, depending on your design, this will possibly screw up your navigation.

I just updated to qQuery Mobile 1.1.0 final. The flash is visible when linking to external pages, i.e. not using multipage, but the flash is only a problem if the page you are linking to is complex (large) and takes a while to render. In those cases, keeping a consistent background makes the user experience quite alright.

Removing the page transition effects will also keep the interruption to a minimum by including the following javacript before including the jquery mobile library.

$(document).bind("mobileinit", function(){
  $.mobile.defaultPageTransition="none"
});