Make Firefox image scaling down similar to the results in Chrome or IE

I know this is late, but you can trick firefox into rendering the image better by applying a oh-so-slight rotation. I tried to translate() the image to get the same effect… to no avail.

CSS

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

Javascript

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

I avoid browser sniffs at all cost. I borrowed this sniff from yepnope.js and I don’t feel bad about it.

Also noteworthy, this same trick can be used to force sub-pixel image rendering in both webkit and firefox. This is useful for very slow animations – best explained by example:

http://jsfiddle.net/ryanwheale/xkxwN/