Closed fred closed 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.
Added and updated. Thanks for the notice!
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:
cheers.