9

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!

codeulike
  • 22,514
  • 29
  • 120
  • 167

5 Answers5

16

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.

codeulike
  • 22,514
  • 29
  • 120
  • 167
  • Saved my arse! This is exactly what I needed to know. I thought there was something wrong with my CSS and was hacking it for an hour or so when I found this post. Thanks! Actually, I'm not sure what the real limit is, I think it's a file size limit, not megapixels or width or height. – Brian Dec 09 '10 at 23:47
  • For quick & cloud-side mobile image shrinking you could use http://tinysrc.net so the poor browser - and network - doesn't have to do the hard work. – James Pearce Apr 15 '11 at 18:55
  • Correct about >32 megapixels not showing at all - took an hour of debugging, but this was the solution. iOS Safari loads the image if pointed to it directly, but when the image is a background, the debugging console in OSX safari shows a broken image symbol with no useful information. – user208769 Mar 07 '14 at 09:24
0

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!

wordman
  • 581
  • 2
  • 6
  • 20
0

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

jonas
  • 1
  • 1
    No need to re-code. just use CSS3 media queries (which the mobile safari recognizes) and create a smaller background image for iphone: @media screen and (max-device-width: 640px) { /* special sytles for iPhone / similar devices */ #affected_div(s){ background: url(images/smaller_bg_img_filename.jpg) top center no-repeat !important; } } – Brian Dec 09 '10 at 23:49
0

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.

Varun Jain
  • 53
  • 1
  • 1
  • 5
0

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

Mark
  • 622
  • 11
  • 27