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
});

Answer 2

Try to add data-transition as specified here: Display issues when we change from one jquery mobile page to another in firefox

Here is the example from the answer above:

<a href="#page1" data-transition="fade">I am good transition</a>
<a href="#page1">And I am bad</a>

Answer 3

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.

Answer 4

For me, I got flicker and blinking when a slide in panel was installed. The blinking funnily enough happens even when the panel is hidden, and for me occurred on collapsible elements.

My 'solution' was to add this to my css file: (as suggested from http://api.jquerymobile.com/panel/ ) With JQuery Mobile 1.3.1 :

div {
   -webkit-transform: translate3d(0,0,0);
 }

Which sounds crazy - but 'worked for me'. (Yes all divs)

Seems that there are no side effects seen - yet.

I have written programs in OpenGL, but don't have a clue what -webkit-transform: translate3d(0,0,0); would do.

Answer 5

A combination of the methods here should do the trick...

For others who have this problem, the OP said that

Mainly data-position, webkit backface and others not provide a full solution and I set a custom css from jqmobile 1.0 posted on a github link from suggested by you and finally works

Answer 6

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" />