Question

I am writing a mobile app using jquery mobile. I cant seem to figure why content within the div data-role='content' disappears on Android 4.03+. On iOS Safari and Chrome for Android there is no issue and everything works fine. Its just the default Android browser this happens in. Notice that when i tap inside a listview everything becomes visible, but once i tap outside the input to remove focus, it all disappears again. The headers and footers are set like this:

<header data-role="header" data-id="myheader" data-tap-toggle="false" data-position="fixed">

<footer data-role="footer" data-id="myfooter" data-position="fixed" data-tap-toggle="false">

Any ideas? Video showing what i mean: click me

edit: I originally said everything within the data-role='content' would disappear, but looking again, i notice the inset listview’s border is still showing.

edit 2: Ive also noticed that if i remove the data-position="fixed" from the header and footer, the issue goes away.

Answer 1

I fixed this by re-arranging my css files in the html head. I put all the jqm files last in load order.