CSS background image rendering differently on iPhone

Question

We have a page design that works great in every PC browser that I have tried, but goes strange when viewed with an iPhone or iPod Touch.

The problem is something to

Answer 1

Figured it out: The iPhone has a megapixel limit for Jpegs, after which it shrinks the Jpeg.

There's a very good blog post about this on defusion.org.uk: http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/

The limit after which Jpegs get shrunk seems to be around 2 megapixels. Its a documented iOS resource limit and is described here:

Apple - Creating Compatible Web Content - Know iOS Resource Limits

The maximum decoded image size for JPEG is 32 megapixels using subsampling.

JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.

.. which I take to mean that Jpegs under 2 megapixels are displayed normally, Jpegs between 2 and 32 megapixels are displayed by subsampling (shrinking), and Jpegs over 32 megapixels presumably can't be displayed at all.

Changing my site to use a background image that was under 2 megapixels solved the problem.