iOS5 + jquery-mobile transition blinks

Question

I am trying to remove an annoying flickering effect on jqmobile transitions when running on iOS 5. I tried several methods from other posts like -webkit-backface and did some ot

Answer 1

Common problems on Android 4.0+ as far as I discovered using Cordova 2.9. and JQM 1.3: - page transition white flicker even when "none" transition specified - double taps needed to do a navigation

Tested on SGII, Motorola MC40, TC55, same problems on all platforms.

Use custom style for header, footer, content, remove data-position="fixed"

Use initialization of JQM (be aware, place the JS before JQM include)

.header {
    position : fixed !important;
    z-index  : 10 !important;
    top      : 0 !important;
    width    : 100% !important;
}
.content {
    padding : 55px 15px !important;
}
.footer {
    position : fixed !important;
    z-index  : 10 !important;
    bottom   : 0 !important;
    width    : 100% !important;
}

//use this init

$(document).bind("mobileinit", function()
{
    $.mobile.defaultPageTransition = "fade"; //default, see styles
    $.mobile.transitionFallbacks='none';
    $.mobile.useFastClick = false; //300ms or double tap needed
});