Why do pages blink / flicker after transitions in my jQuery Mobile PhoneGap app on iOS?

Question

I have a jQuery mobile app that I converted to an iOS app using PhoneGap. I am using jQM version 1.1.0.

I use fade transitions between pages (since I read that they were less demanding).

When the PhoneGap version of the application was initially launched in the iPhone Simulator, I received a flicker / flash after each page transition - as if the page was displayed, cleared, and then re-displayed - for only a split second. Something happened when I launched it on the device.

I applied advice in Sarah Jane to answer a similar question .

This fixed the problem in the simulator, but not on the device itself.

Has anyone experienced this problem and found a solution?

Answer 1

This guy solved the problem - it worked for me:

http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

CSS

body { /* Setting body margins to 0 to have proper positioning of #container div */ margin: 0; } /* #container div with absolute position and 100% width and height so it takes up whole window */ #container { position: absolute; width: 100%; height: 100%; } 

JS:

 $(document).one("mobileinit", function () { // Setting #container div as a jqm pageContainer $.mobile.pageContainer = $('#container'); // Setting default page transition to slide $.mobile.defaultPageTransition = 'slide'; }); 

And wrap all your jQM pages in one <div id="container">

Answer 2

The transition fade flashes basically, you have to change it to a slide or some other transition mode.

Answer 3

This can help

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

Answer 4

use the following code

 $(document).ready(function() { $.mobile.defaultPageTransition = "none" $.mobile.defaultDialogTransition = 'none'; $.mobile.useFastClick = true; $.mobile.touchOverflowEnabled = true; });