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

[ghost]

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! 👍

[ctl1690]

Thanks a lot!

This solution also fix auto zoom in IOS.

[woztheproblem]

Deleting the zoom lines fixed flickering issues on a Nexus 10 running Android 4.2.2 using JQM 1.3.0 and 1.3.1. This really needs to be integrated into JQM eventually, because the flickering issues make JQM nearly unusable on the Nexus 10. (even when just browsing the JQM transition demo pages)

[georgegwu]

Just sharing my findings with JQM dev:

1. removing those two lines about meta.attr( "content", disabledZoom ); from jqm1.3.1.js did fix the flickering problem on Samsung Galaxy 2 (or Google Nexus with Android 4.1.1 ) and the fixed footer bar stay fixed when swipe scrolling upward.
2. Although the same fix also seems to reduce the flickering problem on HTC evo 4g ( Android 2.2), but it brought back an old problem, the fixed footer bar would move up and stay floated when you swipe upward to scroll up.

Not sure how they interrelate, hope this gives some clues.

[satishv-denali]

Thanks for this post. Saved me a lot of work :)

[m-alcu]

Works like a charm with fixed toolbar on Nexus 4 (4.2.2).

[m-alcu]

Better aproach without changing jQueryMobile lib, put this in html file (works ok in 4.2.2):

From: http://www.halilibrahimkalkan.com/en/post/2013/01/07/Solution-to-flicker-problem-in-jQuery-mobile-page-transitions.aspx#comment

[RicardoSouzaMoura]

Hi,
I am doing a PhoneGap 2.4.0 + JQM 1.3.1 app. This app will run on either Android or IOs.
This related problem is happening in the Android Emulator 4.2 (Smartphone and Tablet), but in IOs it is ok.
I try to do the changes provided here, but it didn't fix the problem. Does anybody has another solution ?
I just did the tests in the Emulators.

[mlynch]

@hikalkan's solution didn't seem to fix the issue on Chrome w/ Nexus 4 Android 4.2.2. Still get the flickering on transition.

[play75010]

It worked for me on headers on IOS - JQM 1.3.1

Thank you.

As for the content, there are many solutions. But one of them is to check in firebug all the classes generated by JQM, copy them in your code and get rid of the code generation.

[jaspermdegroot]

Note for people who want to test this solution. The code is in js/jquery.mobile.zoom.js, but you should also be able to test this by setting a few options. If you use fixed toolbars, set disablePageZoom to false. For select and textinput you have to set preventFocusZoom to false.

[jaspermdegroot]

@arschmitz

Can we move disablePageZoom to fixedToolbar.workarounds.js and only use it for Android 2.3 and Kindle Fire?

[CoxyJonathan]

A Great thanks. Works like a charm on NEXUS 5

[willyguevara]

Great!! it work for me, Huawei Ascend P6 cordova 3.4.0, and jquery-mobile 1.3.1

[robsonselzelin]

It worked for me as well. I'm using jQuery Mobile 1.3.2, Phonegap 3.0.0 and Galaxy Nexus, Android 4.1.1.

[ldeluca]

It sounds like based on the comments to this issue that the problem is fixed? Mind closing it out @hikalkan if you agree it's fixed?

[hikalkan]

Hi @ldeluca actually I'm not working with jQuery Mobile for a while :) So, if it's OK for everyone, you can close the issue.

[agcolom]

Ok, so closing as requested.

[Ruffio]

But has this fix been implemented or have people just fixed their local build? What version did this get implemented?

[Ruffio]

I don't think that the issue can be closed as the fix has never been implemented. Take a look here: https://github.com/jquery/jquery-mobile/blob/master/js/zoom.js

In line 20 and 27 you can see, that the lines that fixes the issue are still there:
meta.attr( "content", disabledZoom );
meta.attr( "content", enabledZoom );

You can also take a look at the history of the file: https://github.com/jquery/jquery-mobile/commits/master/js/zoom.js
Nowhere is it indicated that changes to the file was been made to fix this issue.

Please reopen this issue until the fix has been implemented or write why the fix is not going to be implemented.

[arschmitz]

If some one can still reproduce this on master we will reopen but all these reports are on 1.3.x which will not have any more releases.

[Ruffio]

@arschmitz Really? Isn't that a little funny tactic to use? You stay silent for a year (13 Aug 2013 - look above) and then want to close the issue because time has passed/the framework has moved to a new version? You can also close the other referenced flickering issue (look above). That is even marked as high priority and is since 2012 and initially reported on version 1.1.0 rc2. It should have been axed so many times by now. I can understand arguments about if it is not technically possible because if it is the browser that causes it, but using a version number as cause of closing an issue, that I really don't like. Especially not when multiple people have stated that it helped them...

You can close these two issues too because they are two old and is also about flickering:
#5805
#4024

Its funny that nobody wants to touch these flickering issues.

[arschmitz]

@Ruffio The simple fact is we are getting ready to release 1.5 and 1.3 will not have any more releases so if this is only an issue with versions 1.3 or prior it should be closed as wont fix. If this is still a current problem then the issue should be reopened. This is not about if a specific work around has been implemented or not its about if the problem actually still occurs.

#5805 was closed at your suggestion ( just actually closed apparently hit wrong button when I said I was closing it originally )
#4024 needs to be tested if it can be closed and is still a current issue.

[Ruffio]

@arschmitz I think that the way to go is to find out if from version 1.3.x and forward there has been any done any updates regarding the page transition. If there hasn't then I'm pretty sure that the issue still exists as most thing stays the same without any change.

#4024 who are we waiting for to test this? It has been about a half a year ago since the last comment on this. And that comment suggests that developers are making their own fixes out side jqm, and that is less than ideal for everybody. I think that this nails the 'problem'. When a solution has been found and body makes a PR then the fix is never implemented in jqm. We could lift this project to higher ground by picking up these quick wins where a solution has been found but where nobody has made a PR. :-)

[naingoo88]

It's still happening on iPad. Does anyone know how to fix?

[Ruffio]

@naingoo88 can you make a test page that clearly demonstrate the flickering?

[sibercat]

The problem still exists:

Using: Droid Incredible 4G LTE by HTC. Android 4.0.4 / JQM - 1.4.5 / Phonegap Build 3.6.3

I'm using Multi-page template structure, the default transition is fade, when the transition is triggered It almost looks like the page is being reloaded 2 to 3 times. If the transition is set to none
data-transition="none" it works fine.

[JuanCAlpizar]

The issue is still closed, though. Did anyone open a new issue referring this one?

[arschmitz]

The issue is still closed because no one has posted an updated test page reproducing the issue like @Ruffio asked for once one is we will reopen this. Please do not open a new issue.

[naingoo88]

@Ruffio thank for ur reply. I use Jquery mobile 1.3.2. Andriod is ok, when it tested oniPad, it happens. The blink page of coding in header is like this
http://www.codesend.com/view/6cd735f40464bf5e509645c5cf1bed85/

[arschmitz]

@naingoo88 please see our contributing guidelines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md and create a jsbin test page using the included template using latest code.

[architvermaa1]

hikalkan i am using android 4.1.2 upgraded to 4.2.1 bcoz of flickering problem in my android micromax.

how to set up code in mobile.

[architvermaa1]

hi luigi please tell what you did so your 4.1.2 started working properly.
my android mobile is not working. and each service centre is saying you have touch screen problem.

[skmuzeer]

In Jquery Mobile 1.4.5 i didn't find the attr of meta.attr( "content", disabledZoom ); can any one please help me to solve this issue

Even i have search in Jquery 2.1.4 i didn't find such type of attr

[haga2112]

I'm using jQuery Mobile 1.4.5 and I think this issue is still happening.

I have this page that has a long list of image links and when I'm on the middle of the scrolled content and I click on an image-link it goes the first item of this listing page (on top), then it shows the loading and finally goes to the other page.

I don't actually know if this 'repositioning' is this Issue (please correct me if I'm wrong).

I also tried the solutions proposed by the Jquery Mobile 1.4.5 docs without success (
http://demos.jquerymobile.com/1.4.5/transitions/)

[arschmitz]

@viniciushaga That is not what this issue was about that is an intentional part of the page transition process it is needed to make sure the next page is scrolled to the top when it is loaded.

[architvermaa1]

pagal man its not working i just going to blast it.

On Mon, Jun 15, 2015 at 7:04 AM, Alexander Schmitz <notifications@github.com

wrote:

@viniciushaga https://github.com/viniciushaga That is not what this
issue was about that is an intentional part of the page transition process
it is needed to make sure the next page is scrolled to the top when it is
loaded.

—
Reply to this email directly or view it on GitHub
#5431 (comment)
.

Thanks
*Archit *
DOEACC CNB
Make a chance to create your own World.

[onetwothreeneth]

any updates ?

[jondspa]

It's still not working in 1.4.5. Please, any updates? Is it working in any version on Android?

Thanks for all you guys do!

• Jon

[architvermaa1]

bro i sold my mobile unable to handle the error ,was facing issues like unable to pick the call. Thanks Archit Have a Nice Day Make a chance to create your own World.

…

On Tue, Jan 10, 2017 at 9:24 AM, jondspa ***@***.***> wrote: It's still not working in 1.4.5. Please, any updates? Is it working in any version on Android? Thanks for all you guys do! - Jon — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5431 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJ4GcAB3Ce8_K3zwjxT10lWCJYP2bwDtks5rQ77RgaJpZM4AWkpy> .

[kwiss]

stop using jquery mobile is the best solution