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 re

Answer 1

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

Answer 2

That might help

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

Answer 3

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">

Answer 4

use following code

$(document).ready(function() 
{ 

    $.mobile.defaultPageTransition = "none"
    $.mobile.defaultDialogTransition = 'none';
    $.mobile.useFastClick = true; 
    $.mobile.touchOverflowEnabled = true;

});