问题
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?
回答1:
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'
});
});
回答2:
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.
回答3:
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