JQuery-mobile android page flash during transition

Question

I am using JQuery-mobilw with phonegap, on android,tested with several machines but when using page transition, from page a to b, it first transit to b, than a is show for a few moments, and b is show again. Sometime this flickering is even worth.

I am using 1.4 JQuery-mobile, but problem exists already in 1.3.2. I tried like every possible suggestions found from the web but none is working. these includes

turn of hardware acceleration

set -webkit-backface-visibility: hidden;

turn of zoom in JQuery-mobile etc.

This is really killing me.

score 1 · Answer 1 · answered Sep 11 '13 at 01:52

1

In JQM, when you add anything dynamic in DOM when transition from A-->B. Sometime this flickering is even worth because page B not really ready( not add more anything finish). You must make sure page B really ready. To do this, you can use setTimeout() to fixed flickering when transition. In javascript, all statement will run at the same time( multithread, it very useful but sometime very complex to control, too).
If use not add anything in page B when transition from A to B then sometime it have been flickering. Please try setTimeout(), you will see transition very very good, very very smooth.

setTimeout(function(){$.mobile.changePage('#page_mail_content', { transition: "slide"});},300);

This fixed problem for me. I believe it have been fixed for you.
Sorry, my English is very bad.@@

answered Sep 11 '13 at 01:52

Hanh Le

894
6
14

Can you post your code. I think i can help you because i had same problem as you. I have been develop Phonegap in android + JQM. I use listview with very items add when transition but it not flicking( i tested in real device). My app have more 10 page and it transition very smooth. – Hanh Le Sep 12 '13 at 01:26
code is very heavy, difficult to post, I am not loading external url, but have heavy backbone structure with view build from local or online db. I will try to get some clean code. – user2412555 Sep 12 '13 at 08:38
Ok. i understand why your transition is flicking. Transition from page A to page B before page B load finish. It mean, when you transit to page B then page B begin load data from database, server,.. It make your page flick. You can try use multiple page in one page(JQM), it will solve problem(i have use it with 20page). – Hanh Le Sep 13 '13 at 01:20
So that i think you shouldn't use transition. Transition will smooth when page is small. – Hanh Le Sep 13 '13 at 10:02

score 1 · Answer 2 · edited May 23 '17 at 12:06

you need something before call Jquery mobile js do like this:

 <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
                    <script type="text/javascript">
                    $(document).bind("mobileinit", function()
                    {
                       if (navigator.userAgent.indexOf("Android") != -1)
                       {
                         $.mobile.defaultPageTransition = 'none';
                         $.mobile.defaultDialogTransition = 'none';
                       }
                    });
                    </script>
                    <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

thats enough.....refer

score 1 · Answer 3 · answered Aug 29 '14 at 08:13

1

Adding user-scalable=no resolves the problem.

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">

Source

Solution to flicker problem in jQuery mobile page transitions!

See the comment

answered Aug 29 '14 at 08:13

Muhammad Raheel

19,823
7
67
103

This fixed it for me. Thank you. – Playforward Jun 25 '15 at 18:14

score 0 · Answer 4 · answered Sep 10 '13 at 22:53

0

I know the pain you're going through. It's unfortunate that Android is so hit-and-miss with jQM's transitions.

Have you tried setting a fallback transition to 'none' as well?

$.mobile.transitionFallbacks.slideout = "none";

answered Sep 10 '13 at 22:53

Ed Meacham

543
1
5
19

Well. maybe this is the only way, I really wished the JQuery-mobile transition would work on android. – user2412555 Sep 11 '13 at 10:56
1

well, it is ok with none, but this is the last thing I will turn to. – user2412555 Sep 13 '13 at 10:22

score 0 · Answer 5 · answered Sep 11 '13 at 07:57

0

I solved this problem in this location:

https://github.com/jquery/jquery-mobile/issues/5431

Good luck.

answered Sep 11 '13 at 07:57

El Patuleko

1

unfortunately I tired all suggestions, but with no success. – user2412555 Sep 11 '13 at 10:30
That was my case too, until I found the link I shared to you. – El Patuleko Sep 11 '13 at 18:49
I did as link suggested. remove the zoom line and set hardware to false, but it didn't help. which more method are you referencing to? – user2412555 Sep 11 '13 at 21:48
First I downloaded the developer version jquery.mobile file. I searched and deleted meta.attr lines ("content", disabledZoom) and meta.attr ("content", enabledZoom). Finally I deleted the .Apk file Android project and generated app with Eclipse again. – El Patuleko Sep 11 '13 at 23:38
I did all these steps.. the flickering still exist. I think it may have something to do with the heavy pages I am loading.. – user2412555 Sep 12 '13 at 08:36
Try with two pages fresh project and minimun settings. Good luck – El Patuleko Sep 13 '13 at 04:56

JQuery-mobile android page flash during transition

5 Answers5

Linked