Question

Im having a problem with Jquery Mobile after compiling it with Phonegap.

Here is a code snippet:

function game() {
    $.mobile.changePage( "#game", { transition: "slideup"} );
}

Page 1:

<a onclick="game()" data-role="button">Start game</a>

Page2:

<div data-role="page" id="game" data-theme="a">
   ... 
</div>

When i click the link “Start Game” it sure does change the page, but it double blinks. This looks very bad, and im trying to get rid of it. I like the transision slideup, but i just want the page to change without it looking like its double changing.

Anyone able to help? 🙂

Answer 1

Phonegap problem with blinking on android is due the poorly performing platforms like Android version 2.x. I advise you to turn them off on that android versions. There are some possible css fixes but I never managed to include them properly in my code.

Transitions can be turned off like this:

$(document).bind("mobileinit", function()
{
    if (navigator.userAgent.indexOf("Android") != -1)
    {
        $.mobile.defaultPageTransition = 'none';
        $.mobile.defaultDialogTransition = 'none';
    }
});

More about android phones problem can be found here: http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/

After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.