I am testing a mobile web application built in jQuery Mobile 1.1.0. I am testing the website application using my Galaxy Nexus running on android 4.0. There is a nasty flicker on the CSS swipe transition and i have looked around for fixes and found this:
.ui-page {
-webkit-backface-visibility: hidden;
}
However, when i use this fix, the index page which has a listview does not display. Please help me. What could be the problem?
The only real way to prevent the "flickering" is to disable the jQuery Mobile page transitions altogether. In the of your document, place this code:
// load your custom jQuery Mobile Defaults
<script type="text/javascript" src="mobile/js/mobile-site-custom-jqm-defaults.js"></script>
// load jQuery Mobile
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
// load your scripts.js (your javascript & functions, etc.)
<script type="text/javascript" src="mobile/js/script.js"></script>
To disable transitions, inside of the mobile-site-custom-jqm-defaults.js file, place this code:
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
defaultPageTransition: 'none'
});
});
I found on network this solution:
if (navigator.userAgent.indexOf("Android") != -1) {
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
I tested it on Android app written with use of cordova 2.2.0, jquery 1.8.2 and jquery mobile 1.2.0. And I must say it works. I hope the jquery mobile dev team will solve transitions flickering but now the only way is to turn them all off. I want to add that I checked all css tricked from first 30 google searches on this topic.
It didn't work for me too (especially in iOS). Then I used
<a href="index.php" data-transition="none">Index</a>
It worked for me. Page transition
来源：https://stackoverflow.com/questions/11029427/jquery-mobile-flickering-screen-during-transitions