Solution to flicker problem in jQuery mobile page transitions!

[hikalkan]

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.

[jaspermdegroot]

@hikalkan

Thanks a lot for your post! We are going to look into this. Can you let us know on which platforms/browsers and devices you tested?

[hikalkan]

I tested it in Samsung Galaxy S II with Android 4.0.3
Also tested in Sony Xperia Arc with Android 4.0.4
Tested in android's default browser.

[tommyvallier]

Just tested it on a Cordova 2.3.0 app, Nexus S, running a ROM'd 4.2.1. Seems to have done the trick.

[ArjBasu]

Works great , tested on a Cordova 2.3.0 on Nexus 7 running 4.2.1.
Thanks a lot

[jaspermdegroot]

Did anyone tested this with a fixed toolbar?

[ArjBasu]

My site had a fixed footer, working without any problems

works great - Galaxy SIII 4.1.2 & Cordova 2.2.0
My app has fixed header and footer. dialog shows fine too

thanks hugely...that was stressing me

[michelpa]

works for me on android 4.0.4.

Actually does not work, trouble with header not rendered from time to time on page change...

[michelpa]

Well, i tried every workaround i found and this is the only one that seems to work:

• adding this to the android manifest:

<application android:hardwareAccelerated="false">

[tdurand]

Seems to work for me with : Android 4.0 , 4.2 and fixed header

[azouaouben]

thanks for sharing, when i tested it on a GS3 it worked without any problem, but on an LG (smaller screen) the fixed footer bar moved a little and the zooming is enabled which is not really what we want if we have an apk .
i would appreciate any author suggestion to solve this issue .

thanks

[atMari]

I tried it on a Galaxy S3 with Android 4.04 with fixed headers and footers.
It does not work for back buttons with: data-rel="back." The header title is cropped and shoved to the right of the bar.

[Orijit]

Observed marked improvement on Samsung Galaxy Note 2 running Android 4.1.2. Native app with webview using JQM 1.3.1

[luigibrandolini]

Tried on Android 4.1.2, works like a charm! Thank you very much! 👍