Question

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

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:

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.

Answer 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.