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

Answer 2

This is working for Cordova 3 and Cordova 2.9

So as mentioned above after you set your app's background color via CSS like this:

 body{
   background-color: #000;
 }

Go to your CordovaXlib.xcode.proj and look for your "Classes" folder MainViewController.m line#142

Uncomment the "webViewDidStartLoad" method or function and just add

  self.webView.opaque=NO;

So you will have something like this:

 - (void) webViewDidStartLoad:(UIWebView*)theWebView
 {
    self.webView.opaque=NO;
    return [super webViewDidStartLoad:theWebView];
 }

Answer 3

It would be great if you could tell us which version of jQM and which version of PhoneGap does this for you. I assume from your tags you experience this on iOS, which version of iOS though?

try setting the following CSS property

-webkit-backface-visibility: hidden;

and let me know if it helps.

This CSS rule comes with a word of warning though. It has caused problems for me on Google Maps and with Forms. Use it sparingly and only if you really need it.

Answer 4

In the Xcode project left panel, open the 'Classes' folder, then the 'AppDelegate.m' file. You will find the code for webViewDidStartLoad and webViewDidStartLoad methods.

To fade the web view, add:

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
  self.webView.alpha = 0.0f;
  [super webViewDidStartLoad:theWebView]; // add this line to your code
}

Then to lighten up, add at the end of the method an animation:

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
  ...
  [super webViewDidFinishLoad:theWebView];
  ...
  [UIView beginAnimations:@"fade" context:nil]; // add these 3 lines to your code
  self.webView.alpha = 1.0f;
  [UIView commitAnimations];
}

The '1.0' parameter is in seconds. You can shorten it to 0.5f, or even less.

And you may use a black background.

Answer 5

This fixed the problem in Android for jQm 1.4.2 along with the rest of these answers, going to be testing on iPhone tonight...

<meta name="viewport" content="width=device-width, user-scalable=no">