JQuery-Mobile Page transitions - flickering (separate pages) - css

Question

I spend the day figuring out how to fix the flickering between page transitions in JQuery-Mobile 1.3.1.
I found that
.ui-page { -webkit-backface-visibility: hidden; }
or setting the data-transition to none
or removing meta.attr( "content", disabledZoom ); and meta.attr( "content", enabledZoom ); from JQM file
helped.
But apparently that is only working if the webapp is just one "multi-page".
I am using 4 separate pages.
In iOS (mobile Safari) and on PC (Browser: Chrome) I don't have any transition flickering.
But as soon as I add the App to to the Homescreen it flickers again.
Here I read that there is no possibility in avoiding page flickering for (PhoneGap/Homescreenapp) if there are separate HTML files in use: https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J
Is there no solution for this?

Answer 1

Nothing answered so far worked for me.
I ended up binding a function to all links or elements which cause a page change.
In the function, i trigger the page change but explicitely tell it 'none' for the transition.
Here is an example:
Javscript (jQuery)
$('.item-navbar-people').on('tap', function (e) {
$.mobile.changePage("#page-people", { transition: "none" });
});
Markup
<div data-role="navbar">
<ul>
<li><a class="item-navbar-people ui-btn-active">People</a></li>
</ul>
</div>
Hope this helps!

Answer 2

Work-around Solution
So, these are the things I tried:
data-transition="none" / $.mobile.defaultPageTransition = 'none';
.ui-page { backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */ }
delete meta.attr( "content", disabledZoom ); & meta.attr( "content", enabledZoom ); in jquery.mobile.js
-webkit-transform:translate3d(0,0,0);
data-position="fixed" headers/footers
deactivating user scale in meta tags
It did not work for "Homescreen-App"/"PhoneGap-App"
I also applied body{ background-color: black !important } to make the blink appear more subtile , which worked but was still ugly.
So I found a work-around solution: jQuery 1.1.0 RC2 and jQuery 1.7.1: no flickering when data-transition is set to none.

Answer 3

This is a known issue.
Disabling/Enabling zoom BEFORE each page transition will resolve the issue.

Answer 4

I figure out it, changing the scale of viewport meta tag.
Let's me clarify...
In my tests I saw that when I apply some zoom in page on mobile devices, the transition works perfectly. So, just change the initial-scale in your viewport meta tag to something higher than 1.0, something like 1.01 for example. That's it!
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.01">

Answer 5

I spent weeks trying all suggested solutions in the Internet, what works for jquery.mobile-1.3.2 , Android 4.1.2, phonegap 2.9.0 is to delete these lines in jquery.mobile-1.3.2.js file
meta.attr( “content”, disabledZoom ); // just put // before the line
meta.attr( “content”, enabledZoom ); // just put // before the line
This will eliminate double flicks, also
set data-transition between pages to none
data-transition="none"
(The second fix is temporally until you can find a solution to get ride of remaining white page during transition)
Using this solution, no need to remove data-position="fixed" from header or footer which is one of helping solutions, but affecting interface design.
source: comments on http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html

Answer 6

I had the same problem and something that sped things up and eliminated the flickering effect was implementing fastclick.js found here: https://github.com/ftlabs/fastclick.
After linking to the .js file,
Add
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
to the head of your document.
Voila. That helped me, hope it helps you too!