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