Screenshots of an iPhone showing the broken background and the working background
Updated: 22nd Feb 2010
I experienced a slightly odd bug in the latest version of mobile Safari on iPhone where it was shrinking large background images applied via CSS to fit within the confines of the screen. Not finding anyone else who has written about this problem I thought I’d share my findings.

Firstly a bit of background, the company I am working for at the moment recently released a real-time CSS editor (of sorts) which I built that allows customers to style their sites using nothing more than uploaded images and some UI controls – for more details on that you can see a video of it in action on this blog post and some of the amazing results that customers have been able to achieve with it.

Yesterday one customer reported an issue where a large background image (1800×2520) was being shrunk on the iPhone. I did quite a lot of investigation and to cut a long-ish story short I discovered that there is a tipping point where the total pixel-area of an image causes mobile Safari to resize the image. This tipping point appears to be at 2,000,001 pixels.

Read on for a bit more of a breakdown of my experiment results.

To debug this issue I looked at the pixel size of some of our larger background images that were working fine on the iPhone and then tried various sizes to see what the results were. My experiments are shown in the table below (in the order I performed them).

Width  Height  Pixel area  iPhone shrinks background
1400 1200 1,680,000 No
1200 1600 1,920,000 No
1200 1800 2,160,000 Yes
1200 1700 2,004,000 Yes
1200 1650 1,980,000 No
1200 1675 2,201,000 Yes
1200 1666 1,999,200 No
1666 1200 1,999,200 No
1667 1200 2,000,400 Yes
500 4000 2,000,000 No
500 4001 2,000,500 Yes

There were further tests in between but I won’t list them all for your sanity but my tests seems to say that it didn’t matter on the width or the height of the image just the total pixel area. E.g. a very wide image < 2,000,001 works just as a very high image does. At 2,000,001 pixels or larger they get shrunk. Note I didn't get it right down to 2,000,001 pixels and this is just an educated guess that it is the actual tipping point.

I’m going to submit this as a bug to Apple I’m not sure what is causing this but another guess of mine is that 2,000,000 is the maximum area that the renderer will handle/cache (you can see this in effect when you scroll around on mobile Safari how it re-draws the page) and so is getting enforced on the background image some how.


Update: 22nd Feb 2010
It seems I should have RTFMed. Apple got back to me with regards to the bug and pointed me at the Known iPhone OS Resource Limits in the Safari Web Content Guide which says:

  • The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels.

    That is, ensure that width * height ≤ 3 * 1024 * 1024. Note that the decoded size is far larger than the encoded size of an image.

  • 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.

Emphasis added.

Comments

There have been 62 comments so far, join the discussion.

Pages: « 1 [2] Show All

51. Mike Ortega - 2nd Apr 2012 - 8:20 pm

I found a rather simple fix for this issue – in the CSS, where you are setting the background image, add this to your selector—- “background-size: [WIDTH]px [HEIGHT]px;” where Width & Height are the size of your background image. Fixed it in a heartbeat! iOS already supports the background-size property, so it’s good to go!

In my case, this is what my CSS looks like….

body {

background: #fff URL(’/img/mainBacker.jpg’) no-repeat top center;
background-size: 2000px 1150px;
}

52. Iks - 3rd Apr 2012 - 7:18 am

Thank u so much!!

53. William van Dijk - 25th May 2012 - 9:02 pm

Great solution, fixed the problem! Thanks a lot! Greetz from Holland!

54. Lukas - 28th May 2012 - 11:05 pm

lifesaver. thanks.
background-size works too.

55. Kristen - 30th May 2012 - 11:12 pm

I am still having this problem. I do not use a background image for my website’s body. What else could the problem be, or am I just missing something? My site is: http://www.onguardinc.com.

56. Dan Harvey - 25th Jul 2012 - 6:19 am

Great solution – background-size did the trick! Thanks.

57. Dave R - 1st Oct 2012 - 5:32 pm

To my surprise, this solution still works today. I just spent hours trying to fix a bg-image that acting differently between an iphone, ipad, and ipod. Keeping the resolution below 2million solved it!

I also tried the background-size before finding this post. I did work, but created some pixelation I wasn’t happy with.

58. Gamer - 19th Oct 2012 - 1:16 am

The solution of setting the background-size is a … solution but not a one that makes people happy …

If you set the background-size it seems that iOS shrink the image as normally and after that scales it up to the background-size. So the image could be much more blurry as the original image.

60. Ana - 18th Apr 2013 - 12:27 am

The easiest fix of all, is to use a PNG image as a background, instead of a jpg one.

IOS won’t scale the PNG image.

Works like a charm, and the size is about the same as a jpg with 100% quality (slightly smaller actually)

You should still set your background size
background-size: 2000px 1150px;

Also, aditionally for a better experience in ipad / iphone, you should:

a) set a min with do the body tag (mine is usually 980px)

body {
min-width: 980px;
}

b) add a viewport meta tag, with the same width of your body

…and voilá.

Users should now be able to: – see the design as you have created it – zoom the content (wich they couldn’t if you used “initial-scale=1, maximum-scale=1” in the viewport meta tag) – change the device landscape to portrait and vice versa with no issues

61. Ana - 18th Apr 2013 - 12:29 am

Sorry, here’s the viewport code

meta name=”viewport” content=”width=1000px”

=)

Pages:« 1 [2] Show All

Leave a comment

No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)