Firefox blurs an image when scaled through external CSS or inline style.

Question

When I visually scale an image, Firefox 3 blurs it. Firefox 2 and other browsers don't, which is the behavior I expect. This is especially lame for creating a web based game using png or gif sprites.

For example, when showing a 100x100 image in Firefox 3 like this:

<img src="sprite.gif" width="200" /> 

or

<img src="sprite.gif" style="width:200px; height:200px;" /> 

it looks blurred in FF3, not in IE.

Any ideas on how to prevent this?

Answer 1

I discovered this new feature of FireFox:

http://developer.mozilla.org/En/CSS/Image-rendering

So putting this in your CSS will fix it:

image-rendering: -moz-crisp-edges; 

Thought I'd share this info. Sorry for answering my own question ;)

Answer 2

I was just wondering about this myself, but it seems it's hardcoded in ff3 :( http://forums.mozillazine.org/viewtopic.php?f=7&t=752735&p=5008845

ff2 didn't do any interpolation

IE doesn't by default, but you can turn it on: http://www.joelonsoftware.com/items/2008/12/22.html