iOS7 ignoring retina css media queries - background-size

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: https://i.sstatic.net/adZ7X.jpg

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?

Solution

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.