iPod touch iOS6 - elements with large background i

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

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 2

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 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.