Note that there are some explanatory texts on larger screens.

plurals
  1. POBlinking/flickering with JQM and PhoneGap on Android
    primarykey
    data
    text
    <p>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.</p> <p>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.</p> <p>Failed trying below:</p> <ul> <li>Dozens CSS hacks I found on internet. (like: <a href="https://github.com/jquery/jquery-mobile/issues/4024" rel="nofollow noreferrer">https://github.com/jquery/jquery-mobile/issues/4024</a> and <a href="https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EtZ2KwseKQ0" rel="nofollow noreferrer">https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EtZ2KwseKQ0</a> and <a href="https://stackoverflow.com/questions/5953753/flickering-when-navigating-between-pages">Flickering when navigating between pages</a> ).</li> <li>I tried switching of fixed headers (again, I am not using transition effects)..</li> <li>I tried jQuery Mobile 1.3.1. (no luck there)</li> <li>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.</li> </ul> <p>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).</p> <p>I tried the code below now also.</p> <pre><code>ui.page { -webkit-transform: translateZ(0); -webkit-perspective:1000; -webkit-backface-visibility: hidden; } </code></pre> <p>To bad still no luck.</p> <p>Also tried this one: <a href="https://github.com/watusi/jquery.mobile.simultaneous-transitions" rel="nofollow noreferrer">https://github.com/watusi/jquery.mobile.simultaneous-transitions</a> Still a brief (full white page) blink before transistion.</p> <p>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.</p> <p>Update 25-04-2013: Also tried: <a href="https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EtZ2KwseKQ0" rel="nofollow noreferrer">https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EtZ2KwseKQ0</a> <a href="https://github.com/jquery/jquery-mobile/issues/4024" rel="nofollow noreferrer">https://github.com/jquery/jquery-mobile/issues/4024</a> <a href="https://github.com/jquery/jquery-mobile/pull/4129" rel="nofollow noreferrer">https://github.com/jquery/jquery-mobile/pull/4129</a></p> <p>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.</p> <p>Also tried the 1 page template (all pages in one file). Did not help either.</p> <p>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</p> <p>I have submitted an issue on Github now: <a href="https://github.com/jquery/jquery-mobile/issues/6031" rel="nofollow noreferrer">https://github.com/jquery/jquery-mobile/issues/6031</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload