Geek asks and answers

IOS5 + jquery-mobile transition blinks

I am trying to remove the annoying flickering effect on jqmobile transitions when running on iOS 5. I tried several methods from other posts, such as -webkit-backface, and did some other work, but did not reach the full solution. I noticed that flickr occurs when the page moves before the transition due to the fact that the navigation bar is shifted one pixel (maybe 2) from the top. The problem starts with initialization or after turning the device when the page is reloaded, and then we got two possible working results,

  • Work without flicker and expectations at each transition.
  • Falls on each described transition, blinking.

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

+5
source share
6 answers

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

For others who have this problem, the OP said that

Basically the data-position, webkit backface and others do not provide a complete solution, and I install custom css from jqmobile 1.0, located on the github link from the one you proposed, and finally it works

+2
source

If you have data-position="fixed", then you must use the following:

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

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

: / - CSS , :

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

, data-position:fixed header/footer.

( jQuery Mobile) :

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

/ .

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

, jQuery Mobile, . : https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856 ( )

- : https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994. , z-index -10 z-index .

- , .

+4

-, : jquery firefox

:

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

, . , , .

"" css: ( http://api.jquerymobile.com/panel/) JQuery Mobile 1.3.1:

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

- " ". ( divs)

, - .

OpenGL, , -webkit-transform: translate3d (0,0,0); .

0

Android 4.0+, , 2.9. JQM 1.3: - , "none" - ,

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

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

Use JQM initialization (remember, put JS before JQM)

.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
});
0
source

More articles:


All Articles