iPod touch iOS6 - elements with large background images show up blank

Question

I've reproduced this on two separate iPod touch devices running iOS 6. iPhone does not seem to be affected, neither is iPad.

I'm using a sprite file for images in my web application. I am now trying to provide retina support, so I have created a separate retina sprite file which is twice the dimensions of the low quality one.

It seems like neither Chrome nor Safari like to display this.

I'm doing the following: .img { background: url(xx-retina.png) no-resize top left; height: xx; width: xx; display: block }

And in the body: <div class='img'/>

The type of tag doesn't matter. The background-position offsets I specify don't matter. The image won't display, though it seems to get loaded if I look at the debug tools. If I start cropping the image, eventually it will show up.

Does anyone have any information about this ?

Answer 1

I got the same problem. I have tested large png-8, png-24 and gif images and it doesnt matter if they have transparency or not - the image wont display on iPOD.

I also tried drawing the images in canvas but it didnt work too.

If you do not need transparency you could make your images jpg - largest jpg I used was 14mb and was still displayed properly.

Answer 2

Same problem happening to me. I'm using a large image as a background of the opening part of the site. On iPad and iPhone it works just fine..on the iPod the image isn't loading at all. So strange! I have done much more complex sites with a lot of images and never experienced this problem.

Answer 3

I have the same problem - 4th gen iPod Touch running iOS 6 won't show a phonegap page's background image. Since I still want larger/hi-rez devices to use the hi-rez image, what I did was use a media query to change the background image for smaller screens.

@media (max-width: 500px) {
    #login {
        background: url(../../splash/640-960.png);
    }
}

In the case of the OP, you'd want to use a similar media query and set your image class to use the smaller/original images:

@media (max-width: 500px) {
    .img {
        background: url(xx-non-retina.png) no-resize top left; 
    }
}

I've selected a max-width of 500px because the 4th gen iPod Touch has an effective resolution of 320w x 480h, so in landscape orientation the screen width will be 480px.