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.

Answer 2

Not quite true, I have a background 1640x1200 (sub 2Mpix) and the background shrinks here... :S

Answer 3

If you have kept

background-attachment: fixed;

in desktop CSS file, then remember it to change it to

background-attachment: scroll;

in mobile CSS file. If this is not done that it will show unexpected effect.

Answer 4

I realize this post is two years old as I write this, but I tried something that worked, perhaps not the best way to go but it solved my problem.

First step was to save my background image as a .png which cured the problem completely...except being a 1200px x 12000px background image, the .png file was a monster.

So, I opened the .png file in Photoshop and saved it optimized for web and devices as a .jpg and uploaded that file and it worked like a charm on the iPhone and all of the big 5 browsers.

Hope that helps!

Answer 5

I used Safaris CSS3 multiple background images to get around this, just made 4 images 500px tall and positioned them on top of each other