Flickering when navigating between pages

Question

My phonegap/jquery mobile application flickers most of the time when I navigate between the pages. Is this normal or is there a solution for this?

Answer 1

There are news (2012-01-10) about the flickering on Android, see http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/

Quote: 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.

The CSS solution from this thread didn't work for me (Android 2.x).

I disabled the transistion with data-transition="none" in all links and everything was ok. It should also work when set on page-level, but it didn't work for me (jQuery Mobile 1.0). This is the code:

// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
    $("a").attr("data-transition", "none");
}

Another (the better) way would be to set the default transitions for jQuery Mobile:

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

iPhone performs the transitions hardware-accelerated, while the other platforms perform it per software. This explains why only iPhone performs smooth transitions.