Solution to flicker problem in jQuery mobile page transitions!
Milestone: 1.4.0

uGoMobi is assigned
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):

$.mobile.zoom = $.extend( {}, {
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.

What fixed THAT was to make sure that they had the correct data-position as fixed – for instance:

That worked to fix the bug that your fix solved. Thank you! But arrugggghh with this web-wrapped-in-js-native-mobile sandwich stuff. The layers of fixes for simple UI things is reminding me of bad cross-browser compatibility days of long ago.

Thank you Glen !!

cheers

in the css file.
The combination worked for me. I have tabs in the bottom of my page.

.ui-mobile {
background:#000
}
.ui-mobile-viewport {
background:#000
}
.ui-page {
background:#000
}