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 do with a centred background image thats very tall:

#content_container
{

background-image:url('content-background.jpg');
background-position:top center;
background-repeat:no-repeat;
width:1020px;
height:auto;
}

The content-background.jpg image is very tall (3000 pixels) and is designed to be 'revealed' as the DIV it is in grows due to content.

You'll have to look at the page and full CSS to understand, so I've stripped everything else out of the design and re-produced the problem with this example:

http://files.codeulike.com/static/cssexample/example.htm
(example made up of 1 html file, 1 css file and 3 images)

You'll see that in IE8, Firefox, Chrome you'll get a nice green box. But in an iOS browser the long thin background image gets re-scaled and everything goes odd.

(I'm using an iPod Touch 2nd gen but I assume the same problem will happen in other iPhones/iPod touches).

Any help greatly appreciated!

Answer 1

You may want to recode for phone resolution and use a separate URL for your smartphone users.

For example, if someone is using an HTC Pure and their resolution is 320px, recode the site and the background for it and use http://m.example.com to direct them there.

Try testing the same image at a different resolution. If it was created at 300dpi, try using 72dpi for screen.

Answer 2

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.