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 gam

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

You're scaling the image up from its original size -- the desired effect is normally to have smooth scaling, and it would appear FFX3 has started doing this (i assume bilinear filtering). I think if you look at Safari and Opera you'll find they also filter the image.

Answer 3

I actually prefer the way FF does it since it uses interpolation when scaling images, in most cases this makes the images look much better than they would in IE. However I guess there can be cases where it's not good, like when using sprites.

I don't think there's a way to get around it though.

Answer 4

Unfortunately I don't have a solution for this, but this is a complete dealbreaker for a large number of users (e.g. pixel artists). If you are affected by this please send feedback to http://hendrix.mozilla.org/ and vote for the corresponding bug.

It is disappointing that Mozilla is ignoring this issue. For the many affected users it means that there is no other choice than to switch browsers. IE has a CSS property to select the resizing filter, so this seems to be the best choice.

Here is the bug report for Google Chrome, which has the same problem as Firefox. I don't know about Opera, but I heard that they use some heuristics for a saner automatic scaling.

Answer 5

http://developer.mozilla.org/En/CSS/Image-rendering only applies to the current trunk builds of Firefox (Minefield/3.6a1pre/Gecko 1.9.2). This feature is not in Firefox 3.0 and won't be in the upcoming 3.5 release. The first release with that option will be the next major release after 3.5 currently in the early planning stages with an estimated release in 2010.

Answer 6

I wonder if you would get better results if you created the sprites at the largest size you expect them to be viewed, and then scale them down as required?