1

I see the following botched listview in the Android Emulator (jQuery Mobile + PhoneGap, Android 4):

enter image description here

When the page is first displayed, the list is displayed as expected, but then the content is immediately hidden. Touching the display a few times updates to:

enter image description here

The list itself is nothing unusual, i.e.:

<div data-role="page" class="type-home" id="dine-around-list" data-add-back-btn="true">
    <div data-role="header" data-position="fixed" data-theme="e">
        <h1>Venue</h1>
    </div>
    <div data-role="content" class="content">
        <h3>Restaurants</h3>
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
            <li><a href="#dinearound1">EDGE Restaurant at The Four Seasons Denver</a></li>
            <li><a href="#dinearound3">The Ninth Door</a></li>
            <li><a href="#dinearound4">Bistro Vend&#244;me</a></li>
            <li><a href="#dinearound5">JAX Fish House &amp; Oyster Bar</a></li>
            <li><a href="#dinearound6">Venice Ristorante &amp; Wine Bar</a></li>
            <li><a href="#dinearound7">The Kitchen</a></li>
            <li><a href="#dinearound8">Capital Grille</a></li>
            <li><a href="#dinearound9">ChoLon</a></li>
            <li><a href="#dinearound10">Prima Ristorante</a></li>
            <li><a href="#dinearound11">Osteria Marco</a></li>
        </ul>
    </div>
</div>

Any idea why this would happen? I have only seen this on Android 4 in the Android Emulator, not on any other Android version.

UPDATE: General recommendation is to activate hardware acceleration in the manifest, i.e.:

<application android:icon="@drawable/icon" 
             android:label="@string/app_name" 
             android:hardwareAccelerated="true" >

You can also do this in code, i.e.:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH ){
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
}

Makes no difference though.

Ryan
  • 26,884
  • 9
  • 56
  • 83
  • when the blank screen appears just check in logcat...did you get error msg like following...call to OpenGL ES API with no current context (logged once per thread) – Kri May 01 '12 at 18:50
  • few days back i was getting the same problem...when i was running the jquery mobile code in local browser it was working fine, but whn i was running that in android emulator then it gives black white page on transition of page. so i solved this problem by importing gwt .jar file in my application and now i saw my application working in my emulator. – Kri May 01 '12 at 18:56
  • Can confirm the OpenGL ES API error message... Also saw this question: http://stackoverflow.com/questions/10026445/phonegap-jqm-app-breaks-in-android-4-0-3 – Ryan May 01 '12 at 20:44
  • I could never get any of the solutions posted here to work - I found a blogpost that had the solution, see my other answer: http://stackoverflow.com/a/12749862/561545 – Jeff Oct 05 '12 at 16:01

1 Answers1

1

Strangely, removing the following from the custom CSS used in the app solved the problem:

.ui-page { -webkit-backface-visibility: hidden; }

This line was added before in an attempt to eliminate flicker during page transitions on Android (which was eventually solved by specifying $.mobile.defaultPageTransition = 'none'; and living with it).

It is an odd one - the solution seemed to have nothing to do with the problem.

Ryan
  • 26,884
  • 9
  • 56
  • 83