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 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:

Dozens CSS hacks I found on internet. (like: https://github.com/jquery/jquery-mobile/issues/4024 and https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EtZ2KwseKQ0 and Flickering when navigating between pages ).
I tried switching of fixed headers (again, I am not using transition effects)..
I tried jQuery Mobile 1.3.1. (no luck there)
One thing I did not tried is PhoneGap 2.3.0, but I don't see anything interesting for that matter in the changelog. Edit: issue persists on PhoneGap 2.5.0.

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

score 16 · Accepted Answer · edited Aug 06 '13 at 15:33

16

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

edited Aug 06 '13 at 15:33

Yaakov Belch

4,692
33
39

answered May 22 '13 at 13:20

Svenbjørn Kvilt Olsen

227
2
8

Fixed my blinking! Thanks. I will edit the issue at jQuery Mobile Github. – May 22 '13 at 17:29
you saved my life! thnx alot – colourtheweb Nov 05 '13 at 12:05
YES! I started with the HTML5 boilerplate and the viewport in that sets "initial-scale=1" #WIN – Red2678 Nov 24 '13 at 01:15

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

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.

edited May 23 '17 at 10:29

Community

1
1

answered Feb 08 '13 at 16:43

praneetloke

1,953
1
14
15

Thanks for your answer. I tried your suggestion, but to bad a small blink continues to remain in the app :). – Feb 10 '13 at 14:25

score 1 · Answer 3 · edited May 27 '14 at 09:34

1

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

edited May 27 '14 at 09:34

Girish Nair

5,148
5
40
61

answered Jul 02 '13 at 18:28

Nils

11
1

score 0 · Answer 4 · edited May 27 '14 at 09:34

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?

Hi, I tested it out. I already have defaultPageTransition set to none by default. I also edited the suggestions for the jquerymobile file. I did not work. I noticed that for 1.3.1 your 3th suggestion was already the case. Your second suggestion was indeed different so I tried that. Still a very small blink between navigating in pages. Device: Galaxy Nexus, running Android 4.2.2 :). — , May 09 '13 at 14:49

score 0 · Answer 5 · answered Oct 25 '13 at 05:40

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.

Blinking/flickering with JQM and PhoneGap on Android

5 Answers5

Linked