Flickering when navigating between pages

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?

.ui-page {
    -webkit-backface-visibility: hidden;
}

This worked for me on phonegap / jquery mobile / Android phone.

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.

I tried the other suggestions but none of them worked for me. I ended up fixing it by changing the viewport meta tag as follows:

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

Thanks to http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

I got rid of the flicker on iOS! With static header and footer.

I have my css as below and no data-position="fixed" on the header and footer.

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
      overflow: hidden;
      -webkit-backface-visibility: hidden;
}

.ui-header {
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    padding: 13px 0;
    height: 15px;
}

.ui-content {
    padding-top: 57px;
    padding-bottom: 54px;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ui-footer {
    position:fixed;
    z-index:10;
   bottom:0;
   width:100%;
}