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

Question

I have a jQuery Mobile app that I've converted to an iOS app using PhoneGap. I'm using version 1.1.0 of jQM.

I'm using "fade" transitions between pages (as I read they were less demanding).

When initially running the PhoneGap version of the app in the iPhone Simulator I was getting a flicker/flash after every page transition - as if the page was being displayed, cleared and then redisplay - all with a fraction of a second. Some thing happened when I ran it on the device.

I applied the advice in Sarah-Jane's answer to a similar question.

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

Has anyone experienced this problem, and found a solution?

Solution 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 a single <div id="container">

Solution 2

Fade transition blinks mostly you should change it to slide or some other transition mode.