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 other work but does not reach complete solution. I observed that flickr occurs when, before transition, page is repositioned due to navigation bar is displaced one pixel (maybe 2) from top. Problem begins on initialization or after device rotation when page is rerendered and then we got two possible working results,

1. Working without flickering and expected on each transition.
2. Falls on each transition appearing described blink.

problem, of course, is that you get 1 or 2 randomly when new page render. Thank you.

Answer 1

If you have data-position="fixed" then a solution is to use:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

Answer 2

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.