I’ve recently noticed a rather frustrating iPhone (Safari) background display issue when a large background image contained within the BODY or a DIV element is not rendered at all (using the regular “background-image:” in the CSS).
After doing a bit of investigating, I discovered that a square image of 2289 x 2289 pixels displays perfectly but a 2290 x 2290 pixels image is not rendered at all.
This gives a total pixel threshold level somewhere between 5,239,521 and 5,244,100 – which is 5.2 mega-pixels (not megabytes), so any background images that exceed this threshold level such as a 3300 x 1600 image will not render. I would be interested if anyone finds out the exact pixel number 🙂
The background display problem seems to be related the dimensions of the image in pixels, independent of:
The solution as far as I can see is to either break up the image into smaller tiles or use iPhone specific CSS to display a smaller background image.
I can confirm this problem:
In the mac firefox and safari the problem does NOT occur. But testing in the iphone with its native safari:
My background: url(“./world/map.png”) is 2688×2688 -> does NOT show!
scalling down to:
My background: url(“./world/map.png”) is 2160×2160 -> it does show!
Its useless to me to scale it down or break it into small pieaces. Damn it apple!