Internet Explorer 8 using retina pixelratio media query

Question

I'm building a responsive website with SASS/Compass, and I'm including retina icons (using generated sprites). I include the icons in my .scss with a mixin.

My retina icons mixin:

// Retina icons
@mixin sprite-background($name, $xpos: 0px, $ypos: 0px, $xpos2x: $xpos, $ypos2x: $ypos, $size: image-width(sprite-file($icons, $name))) {
  background-image: sprite-url($icons);
  background-position: sprite-position($icons, $name, $xpos, $ypos);
  background-repeat: no-repeat;
  display: block;

  @media all and ($pixel-ratio) {
    @if (sprite-position($icons, $name) != sprite-position($icons2x, $name)) {
      background-position: $xpos2x $ypos2x;
    }
    @include background-size($size auto);
    background-image: sprite-url($icons2x);
  }
}

Variable:

$pixel-ratio: "-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5";

Usage:

.selector {
  @include sprite-background(clock_small, 0px, 2px, 0px, -1013px, 45px);
}

The problem I have is that Internet Explorer 8 is using my retina sprite as background-image, and fails on the background-size. I know IE8 doesn't support background-size so its being ignored, but this means that my icon positioning is incorrect.

Using javascript you can find out your current pixelratio:

alert(window.devicePixelRatio);

This alerts: undefined in Internet Explorer. How come that my "retina media query" accepts undefined as a valid number, and executes its css? Is there any workaround for this?

Answer 1

You can assign the default value for devicePixelRatio, if it is undefined

window.devicePixelRatio = window.devicePixelRatio || 1