Blinking/flickering with JQM and PhoneGap on Android

11
votes

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 transitions at all. Rest is pretty much standard jQuery.

When I am navigating from page to page I get a white blink (entire page), for a brief moment. I searched on the Internet for hours.

Failed trying below:

When I switch hardware acceleration off in the Android project, the blinking is gone. But then some CSS styling goes wrong and overall performance is very very bad (obviously).

I tried the code below now also.

ui.page {
-webkit-transform: translateZ(0);
-webkit-perspective:1000;
-webkit-backface-visibility: hidden;
}

To bad still no luck.

Also tried this one: https://github.com/watusi/jquery.mobile.simultaneous-transitions Still a brief (full white page) blink before transistion.

It really seems that it has nothing to do with animation transitions of the page itself, but something strange that is happening right after unloading the old page and right before loading the new one.

Update 25-04-2013: Also tried: https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EtZ2KwseKQ0 https://github.com/jquery/jquery-mobile/issues/4024 https://github.com/jquery/jquery-mobile/pull/4129

The only thing that makes the blinking go away is removing the fixedheader part. Then it is as smooth as butter, but I miss the headers that are compatible with the panels.

Also tried the 1 page template (all pages in one file). Did not help either.

jQuery Mobile 1.3.1 PhoneGap 2.5.0 Android 4+ Devices: - Google Samsung Galaxy Nexus - Samsung Galaxy Tab 10.1 (had the issue, but don't have device any more) - Samsung Galaxy Note 10.1

I have submitted an issue on Github now: https://github.com/jquery/jquery-mobile/issues/6031

5
javascriptandroidcsscordovajquery-mobile

5 Answers

16
votes

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" />
1
votes

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.

1
votes

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

0
votes

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.

0
votes

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?