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 (1800x2520) 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.