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 this will cause this:

<a href="user.html" rel="external" data-role="button">User details</a>

How can I fix this? A reasonable workaround may have been to change the white flash to the same color as my web page background color, but I don’t know if this is possible either.

Update:

I’m using PhoneGap 1.5.0 (aka Cordova), jQuery 1.6.4 and jQuery Mobile 1.0.1 on iPhone IOS 5.1 and 5.2.

The problem appears to persist in Safari desktop (although much less visible). There is no problem on Firefox.

Update 2:

The flashing is definitely caused by marking the link as rel=”external”. Unfortunately I am linking to jQuery Mobile multipages, so this is necessary.

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"
});