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.


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

Pages: « 1 2 [3] Show All

101. BlafeFex - 23rd Dec 2016 - 6:49 pm

cialis 40mg – cialis over the counter at walmart
vendita cialis soft
cialis over counter
– vendita on line cialis
cialis price list

102. LarzyDiese - 24th Dec 2016 - 10:40 pm

cialis herbal cialis vbulletin solutions inc. all rights reserved. – generic cialis cialis 10mg or 20mg you cannot post new topics in this forum
generic cialis – cialis price CVS total posts
making cialis powder

103. Barnypok - 27th Dec 2016 - 8:07 pm


104. Barnypok - 28th Dec 2016 - 10:25 pm


105. Waviztrawn - 29th Dec 2016 - 11:08 am

canadian pharmacy viagra 20mg the team

[URL=]viagra without doctor prescription
[/url] viagra 2 dollars 65 cents
viagra without a doctor prescription
– viagra pills cheap profile
viagra posts per day

106. Rozertcor - 29th Dec 2016 - 12:30 pm

viagra prostate

[URL=]viagra without a doctor prescription
[/url] viagra levitra viagra custombbs.cgi
viagra without prescription
– viagra 5 mg online delete all board cookies
best kind of viagra

107. Barnypok - 29th Dec 2016 - 11:21 pm


108. Barnypok - 30th Dec 2016 - 1:41 am


109. Barnypok - 30th Dec 2016 - 12:44 pm


110. Barnypok - 30th Dec 2016 - 9:11 pm


111. Barnypok - 31st Dec 2016 - 11:03 am


112. Barnypok - 31st Dec 2016 - 11:51 am


113. Barnypok - 1st Jan 2017 - 4:19 am


114. LestezOwemn - 1st Jan 2017 - 7:28 pm

cheap viagra online no prescription

[URL=]viagra without a doctor prescription
[/url] viagra 20 mg 8 table the team
viagra without a doctor prescription
– order generic viagra usa
viagra our users have posted a total of

115. Hayden Berretti - 2nd Jan 2017 - 7:24 pm

Hi There! We are looking for some people that might be interested in from working their home on a full-time basis. If you want to earn $500 a day, and you don’t mind creating some short opinions up, this might be perfect opportunity for you! Simply check out the link here NOW!

116. Barnypok - 3rd Jan 2017 - 5:12 pm


117. Barnypok - 3rd Jan 2017 - 5:28 pm


118. Barnypok - 3rd Jan 2017 - 11:05 pm


119. Barnypok - 6th Jan 2017 - 12:30 pm


120. Barnypok - 7th Jan 2017 - 9:43 am


121. Barnypok - 7th Jan 2017 - 11:02 am


122. Barnypok - 8th Jan 2017 - 1:21 am


123. Shaun Harfert - 12th Jan 2017 - 10:25 pm

Imagine if you could have a sports betting system that can be absolutely profitable. Check out the link here to learn more.

124. MelzinNut - 12th Jan 2017 - 10:40 pm

discount cialis

[URL=]generic cialis[/url] cialis canadian pharmacy online you may not post new threads
generic cialis – cialis online without prescription
cialis and alcohol username

Pages:« 1 2 [3] Show All

Leave a comment

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