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

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