Question

I have an HTML 5 web page using CSS 3 and have tested it in more browsers than you can shake a stick at. I am getting a strange problem when viewing the page on an android phone…

When I visit the pages, all of the CSS renders, except the background colour (and luckily the foreground text colour). If I force-refresh the page, it then works. I am getting this behaviour consistently on my Android phone, firmware 1.6.

So when you load the page on a mobile, you get a white background with black text, unless you refresh the page, in which case you get a black background with white text.

The background is defined as:

body
{
    background: #000000 url(images/overlay.png) repeat-x;
    color: White;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 18px;
}

---

If you happen to have an Android phone and want to actually view the problem, please visit:

http://www.webstickynotes.co.uk/

Log in using “[e-mail]” “demo”

And make sure you tick the “mobile” check box.

---

Any help would be much appreciated (even if it is just that you are on a different version of Andoid and it isn’t a problem!)

Answer 1

Okay, I’ve chalked this one up to Android 1.6 and have made sure if the background does fail to render, the text is still visible. I’m glad to hear it is probably okay on other versions.