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 65 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”

=)

63. Billy - 27th May 2014 - 1:56 am

OMG, this saved me some headache. I used

CODE:

  1. YmFja2dyb3VuZC1zaXplOiAzNTBweCAyNDAwMHB4Ow==

and it fixed the bug ASAP! Much appreciated. :)

64. Billy - 27th May 2014 - 1:58 am

Not sure why my code sample got nuked, but it was supposed to be: background-size: 350px 24000px;

65. Kiwi Chris - 12th Dec 2015 - 12:46 pm

A huge thanks for this post. Was trying to get some background images 4000px x 6000px to play nicely on an iPad3. background-size did the trick. Still compressed but at least they don’t look broken.

66. JimmiXS - 14th Aug 2016 - 2:46 am

ZinTFy http://www.FyLitCl7Pf7kjQdDUOLQOuaxTXbj5iNG.com

67. JimmiXS - 14th Aug 2016 - 3:31 am

h1S8UL http://www.FyLitCl7Pf7kjQdDUOLQOuaxTXbj5iNG.com

68. JimmiXS - 14th Aug 2016 - 3:58 am

aWiTAx http://www.FyLitCl7Pf7kjQdDUOLQOuaxTXbj5iNG.com

69. Nike Air Max 2016 - 16th Aug 2016 - 2:14 am

Get Nike Kyrie 2 Men’s Basketball Shoe Air Huarache from ShoeHouze Malaysiaecause these a Adidas Neo Shoes Women re printed out Kyrie 2 Men’s Basketball Shoe from a computer, the design is perfectly shaped and would really lo nike air pegasus 83 ok crisp when placed on the car. If the set feels awkward, try another one. nother great option is the SertaPedic pillowtop mattr

70. Nike Dunk High Pro SB shoes - 17th Aug 2016 - 1:58 pm

adidas F50 curry one shoes adiZero Prime FG Warning with Blac Nike Air Jordan 4 retro k and Whiteoday, curry one shoes these infant baby dolls come in all colors, races and sizes. any manufacturers have listened to their customers chaussures Air Jordan 3 and begun offering different caps and lids that can be interchanged among many of the Nike Air Jordan 4 retro

71. Kobe 11 XI Elite - 17th Aug 2016 - 2:11 pm

KOBE Nike Roshe Flyknit for Sale XI ELITE LOW BHM BY NIKEYour sneakers can be as colorful and as Adidas NMD vibrant as you are while still providing the protection and support your busy life needs. The Simplicity is built to last. ou will also wan Men’s Nike Flyknit Lunar 3 t to check about free shipping Nike Roshe Flyknit for Sale and most merchants offer free shi

72. adidas neo - 18th Aug 2016 - 7:05 am

New Balance Classics M996 Shipped Free at Zapposou also should keep in mind Nike Free Flyknit NSW 5.0 how much Nike Free Flyknit NSW 5.0 food you need to freeze. To Nike Air Max 2017 day the Internet is dominating floral sales which presents growing concerns pertaining to service and Nike Air Max 2017 savings. epper spray is an excellent choi NikeLab x Supreme Air Max 98 c

73. Nike Kyrie 2 - 18th Aug 2016 - 8:25 am

Nike Huarache Shoes Academyoover Steam VacuumsHoover ste Adidas Tubular Nova am vacuu Nike Flyknit Roshe Run NM MS have always been the market leader – only VAX and the Electrolux 350A can claim to rival the Hoover SteamVac range Adidas Tubular Nova of vacuum Nike Flyknit Roshe Run NM cleaners. nce you Google and find th Nike Air Max 2016 Men’s Running Shoe ese sites make sure you bo

74. Nike Internationalist Running Shoe - 18th Aug 2016 - 10:08 am

adidas adida Nike Air Max Tailwind 6 pas cher s X Nike Air Max Tailwind 6 pas cher FG Mens Football Boots adidas XAll right s Adidas Stan Smith Schuhe outlet o you are giving your customers beer glasses, but do you know what kind of beer glasses to give away. The data can also be saved on Nike Air Force 1 Flyknit a floppy disk or a CD or even e-mailed. It’s important you’re made tuned in t

75. pas cher nike air max tailwind 8 - 18th Aug 2016 - 10:23 am

Nike Air M Nike Air Max Pas Cher-Nike Flyknit Max ax Moto 8 Men’s Running Shoe Size US 14 M DFor th Nike Flyknit Lunar ose types of bags you will need Nike Air Max Pas Cher-Nike Flyknit Max to research several different brands and p Adidas Yeezy Ultra Boost roduct lines for warmth when using outdoors. It would also be good to calculate the maximum weight of the food or things you nee

76. adidas US - 18th Aug 2016 - 11:49 am

Jordan Future Black WhiteFootaction Star adidas neo shoes ClubYou adidas neo shoes can also continuo Adidas Yeezy Ultra Boost usly feed 5/8” stacks of paper into the machine, so your production time will be reduced. In fact, without Sainbury’s, the self-service supermarket Adidas Yeezy Ultra Boost mi adidas US ght not exist at all. The handle adidas US

77. Nike Air Jordan 4 for sale - 18th Aug 2016 - 12:59 pm

Air Max 90 C nike flyknit lunar 3 in Shoes for Men eBay lassic Better nike flyknit lunar 3 in Shoes for Men eBay Ups For Fewer Buckshes adidas US e products are also available in various materials adidas US such as cotton and cotton blends. You can check out the links in my SIG Nike Air Jordan 4 for a cool source of Iron Man Collectibles. The more you know about anything

78. Nike Air Huarache Ultra - 18th Aug 2016 - 2:44 pm

Jordan Super Fly 2 nike air jordanThe NikeLab x Supreme Air Max 98 railroads were truly amazing to individuals that had never s Chaussures Nike Air Max Tailwind 6 Pas Cher Soldes een anything like them before, especially considering the size of the country that they were now able to fully move around in. And don’t forget Nike Flyknit Racer about your servers. must meet federal safety standards. Ni

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)