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

Source: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5124172

Instead of data-position:fixed to the header / footer - I applied the following CSS styles to the header, content and footer:

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

Several people on the forum at the above link have stated that this has helped with flashes when transition between pages with data-position:fixed header/footer.

Another suggestion from Tod Parker (a jQuery Mobile creator) was this:

.ui-mobile-viewport-transitioning .ui-header-fixed,
.ui-mobile-viewport-transitioning .ui-footer-fixed { visibility: hidden; }

Which hides the fixed header/footer while transitioning from one page to another.

Source: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856

There was also a commit made by another jQuery Mobile team member that should show-up in the next release. Here is the post: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856 (the code is a bit complex to post here)

Very recently the issue was closed due to this commit: https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994. This fix was to set the z-index of the incoming page to -10 before scrolling and then resetting the z-index afterwards.

I haven't attempted any of these fixes myself but they seem to be promising.