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

Question

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?

Answer 1

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