android - jQuery Mobile flickering screen during transitions

Question

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?

Answer 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'
  });
});