, Snippet

Make Firefox resize images with the proper resampling

samplingUnfortunately, with the current version of Firefox (currently at version 28) any images that are sized in the html or css can appear to look “jagged” as a result.  This is due to Firefox not properly resampling the image when it is resized. As can you can see here, the un-patched logo image in firefox appears jagged as it is resized at various responsive breakpoints.

To fix this issue you can apply a slight rotation to the image which is basically so small its invisible to you or I but tells the browser to resample the image.  Keep in mind that this fix will actually make images look worse in other browsers so I highly recommend that it is used with a conditional statement to ensure only Firefox uses the adjustment.

transform: rotate( .0001deg );

Example Usage:

CSS

.image-scale-hack {
    transform: rotate( .0001deg );
}

JavaScript

if( "MozAppearance" in document.documentElement.style ) {
    $('img').addClass('image-scale-hack');
}

I would recommend only applying the fix on images that actually need it as it may apply a small performance overhead to your page for firefox.