Phonegap + Jquery Mobile changePage on iPhone always gives a white flash before landing to desired page

2
votes

I have a cordova 2.4.0 application made using jquery mobile 1.3.1.

The problem is that on each page changing, using changePage, a white background is shown for 1-2 seconds before switching to the new page.

I am getting this behavior only on iPhone ( haven't tested on iPad ), but on android 2.1 phone and android 4.0.3 tablet all works fine.

I am using separate files for each page, e.g. index.html, login.html, register.html. I even tried to put the page divs into index.html and call the changePage with $('#page-id') argument, but the white background problem is still there.

What I tried so far without success:

  • $.mobile.defaultPageTransition = 'none';
  • .ui-page{ backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Chrome and Safari / -moz-backface-visibility:hidden; / Firefox */ }
  • setting the defaultPageTransition to 'slide' makes the white background effect less acute, but it makes the whole page transition thing really slow and with an odd behavior sometimes.
  • I tried to prefetch the pages with data-prefetch="true" but still no solution

How should I fix this?

1
cordovajquery-mobile
try setting height 100% to the page .ui-page{ height: 100%!important} – Subhash k
It doesn't help, it even makes things worse, because I set a gradient background on ui-page and on pages with more content the background only shows for the first visible page and not after the scroll. Anyhow, the white background flash is still there. What I notice is if I take the header, the footer and only put a simple content ( a link and some text ) the white flash disappears. Which makes me think that probably is a jquery mobile widget creation issue somehow. I also checked if I use duplicate id's but I'm not. – danpop

1 Answers

2
votes

I suggest you to remove all the data-position="fixed" from your HTML. I had the same problem and this solved the "white flickering" issue.

Read more: https://github.com/jquery/jquery-mobile/issues/4024