JQuery-mobile android page flash during transition

2
votes

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.

5
jquery-mobilecordova

5 Answers

1
votes

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.@@

1
votes

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

1
votes

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

0
votes

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";
0
votes

I solved this problem in this location:

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

Good luck.