Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Solution to flicker problem in jQuery mobile page transitions! #5431

Closed
hikalkan opened this issue Jan 10, 2013 · 54 comments
Closed

Solution to flicker problem in jQuery mobile page transitions! #5431

hikalkan opened this issue Jan 10, 2013 · 54 comments

Comments

@hikalkan
Copy link

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
Copy link
Contributor

@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
Copy link
Author

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.

@ghost ghost assigned jaspermdegroot Jan 10, 2013
@tommyvallier
Copy link

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
Copy link

ArjBasu commented Jan 21, 2013

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

@jaspermdegroot
Copy link
Contributor

Did anyone tested this with a fixed toolbar?

@ArjBasu
Copy link

ArjBasu commented Jan 21, 2013

My site had a fixed footer, working without any problems

@ghost
Copy link

ghost commented Feb 9, 2013

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
Copy link

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
Copy link

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
Copy link

tdurand commented Mar 7, 2013

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

@azouaouben
Copy link

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
Copy link

atMari commented Apr 5, 2013

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
Copy link

Orijit commented Apr 15, 2013

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

@luigibrandolini
Copy link

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

@ctl1690
Copy link

ctl1690 commented Apr 25, 2013

Thanks a lot!

This solution also fix auto zoom in IOS.

@woztheproblem
Copy link

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
Copy link

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
Copy link

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

@m-alcu
Copy link

m-alcu commented May 10, 2013

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

@m-alcu
Copy link

m-alcu commented May 10, 2013

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
Copy link

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
Copy link

mlynch commented Jun 11, 2013

@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
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

@arschmitz

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

@CoxyJonathan
Copy link

A Great thanks. Works like a charm on NEXUS 5

@willyguevara
Copy link

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

@robsonselzelin
Copy link

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
Copy link
Contributor

ldeluca commented Oct 6, 2014

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
Copy link
Author

hikalkan commented Oct 6, 2014

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
Copy link
Contributor

agcolom commented Oct 6, 2014

Ok, so closing as requested.

@agcolom agcolom closed this as completed Oct 6, 2014
@Ruffio
Copy link

Ruffio commented Oct 6, 2014

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

@Ruffio
Copy link

Ruffio commented Oct 7, 2014

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
Copy link
Contributor

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
Copy link

Ruffio commented Oct 7, 2014

@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
Copy link
Contributor

@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
Copy link

Ruffio commented Oct 8, 2014

@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
Copy link

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

@Ruffio
Copy link

Ruffio commented Nov 9, 2014

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

@sibercat
Copy link

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
Copy link

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

@arschmitz
Copy link
Contributor

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
Copy link

@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
Copy link
Contributor

@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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link
Contributor

@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
Copy link

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
Copy link

any updates ?

@jondspa
Copy link

jondspa commented Jan 10, 2017

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
Copy link

architvermaa1 commented Jan 11, 2017 via email

@kwiss
Copy link

kwiss commented Jun 30, 2017

stop using jquery mobile is the best solution

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests