iOS7 ignoring retina css media queries - background-size

Question

Apple have just released their new iOS7 operating system but it's causing issues with my retina icon media queries. It appears the background-size property is being ignored. An example image is here: http://imgur.com/R3OgFgN

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:

@media (-webkit-device-pixel-ratio: 2){
.b .logo{
  background: url(../img/2x/[email protected]) no-repeat 0 0 !important;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
}

What it does do;

• Replaces the original image with the @2x image

What it doesn't do;

• Fit the background image to the div element size.

Tested on iOS7 Safari & Chrome.

Has anyone had this problem, and if so how did you manage to fix it?

Answer 1

I solved it! Turns out, iOS7 resets the background-size property when running a media query. The trick is to specify the background-size with the exact pixel dimensions, or with a 100% value like so;

@media
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (-moz-min-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2/1), 
    only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 2dppx){
        .logo{
          background: url(../img/2x/[email protected]) no-repeat 0 0 !important;
          background-size: 100% !important;
          width: 30px;
          height: 40px;
        }

N.b - I also found that including the !important tag ensured all retina devices read the query properly, including Samsung S3 & S4. Enjoy.

Answer 2

This is not buggy behaviour. This is your fault. You set all background properties here:

background: url(../img/2x/[email protected]) no-repeat 0 0 !important;

so browser treats this as

background-image:url(../img/2x/[email protected]) !important 
background-position:0 0 !important 
background-repeat:no-repeat !important 
background-size:auto auto !important 
and so on

thus your last line background-size: 100%; is overridden by background-size:auto auto !important;