Flickering page transitions in Jquery mobile app

3
votes

How do i overcome the Flickering transition/ white-flash/ jumps during Mobile page transitions in a Web app? I use Jquerymobile and Phonegap's (.js) files. None of the solutions posted on https://github.com/jquery/jquery-mobile/issues/4024 or other sites worked for me. I do not use a separate jqueryTransition.js file. Any help really appreciated.

3
htmlcordovajquery-mobile

3 Answers

1
votes

The only real way to prevent the "flickering" is to disable the jQuery Mobile page transitions altogether. In the <head> of your document, place this code:

// load jQuery
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

// 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'
  });
});
0
votes

I only came across flickering transitions while using LimeJS framework, they overcame that by setting the opacity of the object to 0 before transitioning. And from there the transition effect took over by increasing the opacity, but maybe your functionality doesn't support it.

0
votes

I had the same problem as you, and solved it by disabling hardware acceleration.

I reported it here: http://community.phonegap.com/nitobi/topics/disable_hardwareacceleratdisable_hardwareacceleration_on_android_ion_on_android

To make it short, my workaround was declaring in AndroidManifest.xml:

<application android:hardwareAccelerated="false"/>

See also: http://developer.android.com/guide/topics/manifest/application-element.html#hwaccel

HTH