(Really) Long Background Image Does Not Render on iPad Safari

Question

For some unknown reasons, iPad Safari doesn't display a really long background image. In my example, the background image is 1,000 x 10,000 pixels. The same example works on any desktop browser e.g. Safari, Firefox, etc.

I am aware of the background-repeat in CSS but unfortunately it isn't applicable in my specific case.

Solution 1

Mobile Safari has limits to what size background images it will display before subsampling, you may be getting hit by this problem because of the size of your background:

The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.

That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.

see: Know iOS Resource Limits

Solution 2

You can achieve this by using multiple background images. Slice up your long jpeg into manageable chunks that conform to the limit, and then use css3 magic to merge them all up into a single background.

For example I sliced up a 7400px high image into 2048px chunks and position them back together with this:

background-image: url('../images/bg_ipad1.jpg'), url('../images/bg_ipad2.jpg'), url('../images/bg_ipad3.jpg'), url('../images/bg_ipad4.jpg');
background-position: center 0px, center 2048px, center 4096px, center 6144px;
background-size: auto auto;
background-repeat: no-repeat;

This loads on the iPad at full resolution.

Comments

[moey]

The background image on the sample page is <50 KB.

[pjumble]

It's not about the file size, it's the dimensions: 1000*10000 > 5*1024*1024

[moey]

Thanks for editing the answer. It's now clear it's related to the dimension; not the file size.

[Jon z]

Wow that's crazy! Makes sense in a way but it's frustrating that a 100k PNG file that has very large dimensions just won't show up with no visible error.

[Jon z]

Wow good call, using multiple background images is very clever.

[Flappy]

Thanks!! Saved me a lot of time

[Marcelo Mason]

This answer tells you a limit exists. The answer below shows you how to bypass it.