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?

Jeff · Accepted Answer · 2014-03-27T13:21:28.413

12

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

edited Mar 27 '14 at 13:21

answered Oct 05 '12 at 15:56

Jeff

12,085
12
82
152

This worked flawlessly to solve my "white page" problems too. – Jorg Ancrath Mar 28 '13 at 12:10
Sorry but this is not working. What version of PhoneGap, jQuery and jQuery mobile are you using and in what iOS? – Feb 19 '14 at 03:47
Whichever versions that were released at the time of writing. Sorry, I don't remember. – Jeff Feb 19 '14 at 07:18

score 1 · Answer 2 · edited Jul 21 '12 at 09:43

1

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

edited Jul 21 '12 at 09:43

Luke

11,426
43
60
69

answered May 05 '12 at 11:52

Tanveer

1,937
3
24
40

I'm afraid this didn't resolve it - I just get a different flicker. – dommer May 11 '12 at 20:09
I had similar problem in my app then i did steps that fixed the issue 1) Changed all transition to slide 2) checked all function calls that render the pages , may be there is any duplicate calls (i render all my pages dynamically) – Tanveer May 14 '12 at 04:36

score 0 · Answer 3 · answered Aug 18 '13 at 10:41

0

That might help

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

answered Aug 18 '13 at 10:41

alsarea3

1

score -1 · Answer 4 · edited Mar 18 '13 at 13:45

-1

use following code

$(document).ready(function() 
{ 

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

});

edited Mar 18 '13 at 13:45

answered Feb 10 '13 at 15:31

suresh

123
2
6

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

4 Answers4

Linked