Why does my jQuery Mobile app not show correctly in the Android 4.0.3 browser?

Question

I've got a jQuery Mobile (1.1.0) app that is running when viewed using Chrome, FF, Mobile Safari and the browser on Android 2.2. However, when viewed in the browser in the Android 4.0.3 simulator there are a range of issues.

These include:

1) Header bar isn't displayed (it displays briefly on show and them disappears - fixed footer is fine).

2) Buttons on the page aren't shown - but still receive and process the click events correctly.

This also happens on a colleague's ICS Android Phone (Galaxy Nexus).

Markup is all fairly standard for jQM. Main buttons are tags, for example. Header is:

<header data-role="header">
    <h1 data-bind="text: theTitle"></h1>

    <a id="waitButton" href="#" class="ui-btn-left" data-bind="click: wait">Wait</a>
    <a id="pollButton" href="#" class="ui-btn-right" data-bind="click: poll">Poll</a>
</header>

[data-bind attributes are for Knockout.js]

Does anyone know what I need to alter to get it working on ICS? Or is this a "work in progress" for jQuery Mobile?

Answer 1

Found the problem. It was this css rule that I added during my iOS testing:

.ui-page 
{
    /* Supposed to reduce flickering, but screwed up Ice Cream Sandwich. */
    -webkit-backface-visibility: hidden;
}

Answer 2

Confirm this.

Upgraded Galaxy 10.1 tab from 3.2 to 4.0.3. JQM 1.1 pages were not loading, showing mostly blank page, and no header.

The solution above fixed all these. Performance seems to have improved also. Our pages do NOT use transition, however.

Btw, input type="date" will activate native date picker correctly. type="number" will allow decimal point as it should have, which was not working on 3.2.