Solution to flicker problem in jQuery mobile page transitions! #5431
Description
I'm developing a mobile web site using jQuery mobile framework. When I use page transitions (like slide), it causes a flicking. Especially in default browser in android phones, flicking is really bad.
I deeply investigate the jquery-mobile.js to understand when this flickering happens. After spending many hours, I found which code part causes the problem: Enabling/Disabling zoom on just before page transition!
in jQuery mobile 1.2.0 source codes (line 7211 to 7234):
enabled: !disabledInitially,
locked: false,
disable: function( lock ) {
if ( !disabledInitially && !$.mobile.zoom.locked ) {
meta.attr( "content", disabledZoom );
$.mobile.zoom.enabled = false;
$.mobile.zoom.locked = lock || false;
}
},
enable: function( unlock ) {
if ( !disabledInitially && ( !$.mobile.zoom.locked || unlock === true ) ) {
meta.attr( "content", enabledZoom );
$.mobile.zoom.enabled = true;
$.mobile.zoom.locked = false;
}
},
restore: function() {
if ( !disabledInitially ) {
meta.attr( "content", initialContent );
$.mobile.zoom.enabled = true;
}
}
});
I deleted the lines:
meta.attr( "content", disabledZoom );
and
meta.attr( "content", enabledZoom );
(lines 7216 and 7223)
Then it worked smoothly without a problem! I don't know if it causes another problem but the problem was changing max-zoom in page transition. In my tests, it worked correctly without any problem.
I wanted to inform you to consider this problem while changing zoom.