Apple new iOS7 operating system it's causing issues with retina media queries.
The image replacement works perfectly on iPhones 4, 4s, 5 running iOS6 and below (any browser). iOS7 browsers appear to grab the high-res image but ignore the background-size property.
I try with "(min-device-pixel-ratio: 2)" but don´t works because the app showed our non retina sprite ¿anyone have an idea to fix it?
@mixin sprite($x,$y, $spriteX: 32, $spriteY: 32, $imagePath: "sprites.png"){
@include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY);
@media (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio: 2)
{
$imagePath: "spritesx2.png";
background-size: 500px 1760px;
@include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY);
}
}
and
between the prefixed and unprefixed pixels is odd. Shouldn't that be:@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { ... }
? – Paul Roub