Blinking/flickering with JQM and PhoneGap on Android

Question

I am using PhoneGap 2.2.0 in combination with jQuery Mobile 1.2.0 for my app on the Android platform (version 2.3.3 and up). On the pages I use fixed headers, and no transit

Answer 1

Setting viewport to user-scalable=no fixed the problem for me: 

Change

< meta name="viewport" content="width=device-width, initial-scale=1" />

to

< meta name="viewport" content="width=device-width, user-scalable=no" />

Answer 2

Ensure that this code exists in your mobileinit method:

//initialize jQM
$(document).on("mobileinit", function () {
  //hack to fix android page transition flicking issue
  if (navigator.userAgent.indexOf("Android") != -1){
      $.extend(  $.mobile , {
          defaultPageTransition: 'none'
      });   
    }
});

Also : change the following in the jquerymobile.js

// Make our transition handler the public default.
$.mobile.defaultTransitionHandler = simultaneousHandler;

//transition handler dictionary for 3rd party transitions
$.mobile.transitionHandlers = {
    "default": $.mobile.defaultTransitionHandler,
    "sequential": sequentialHandler,
    "simultaneous": simultaneousHandler
};

Also kindly let me know which android device version you are using?

Answer 3

Setting viewport to user-scalable=no fixed the problem for me:

< meta name="viewport" content="width=device-width, user-scalable=no" />

Works for jQuery Mobile 1.3.1 Cordova 2.8.0 on Nexus 4 / Android 4.2.2

Answer 4

The third link in your post is how I fixed it a while back when I had this problem. I also added -webkit-perspective:1000; The flickering is because of 3D acceleration and the backface of the page being transformed becomes visible for a fraction of a second making it look like a flicker.

Edit: Look at this as well for more info.

Answer 5

i tried dozens of solutions but none of them worked, form me the best way for me to solve this blink, is to set de autohidesplashscreen property to false , show the splashscreen in the previous page and hide it in the destination page in the deviceready. In some transitions we slept the transitions about 0,5 - 1 sec in order to avoid spalshscreen blink. Not the best solution but worked for us.