Gaya / Retina-Sprites-for-Compass

Allow to use sprites in retina with Compass.
160 stars 31 forks source link

Fix for Firefox #4

Closed fred closed 10 years ago

fred commented 10 years ago

Hi,

On Firefox 24 the use-sprite() was not selecting the 2x sprite, but the normal sprite. I have macbook pro 15 retina using the 1920 resolution.

So, I added a new item to the media-query selector that was missing in the @mixin use-sprite (min--moz-device-pixel-ratio: 2) I got it from here: https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass/blob/master/_retina-sprites.scss I also added (min-resolution: 144dpi), I believe it's for some mobiles and tablets.

so now it looks like this:

//Sprite mixin, works perfectly with standard defines
@mixin use-sprite($sprite) 
  background-image: sprite-url($sprites)
  background-position: sprite-position($sprites, $sprite)
  background-repeat: no-repeat
  overflow: hidden
  display: block
  height: image-height(sprite-file($sprites, $sprite))
  width: image-width(sprite-file($sprites, $sprite))

  @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 144dpi)
    background-image: sprite-url($sprites-2x)
    background-size: (image-width(sprite-path($sprites-2x)) / 2) (image-height(sprite-path($sprites-2x)) / 2)
    background-position: round(nth(sprite-position($sprites-2x, $sprite), 1) / 2) round(nth(sprite-position($sprites-2x, $sprite), 2) / 2)
    height: image-height(sprite-file($sprites-2x, $sprite)) / 2
    width: image-width(sprite-file($sprites-2x, $sprite)) / 2

cheers.

Gaya commented 10 years ago

Added and updated. Thanks for the notice!