You’re flying through your current project without even the slightest hiccup. Your new Retina-display-ready site logo is fantastic. Scale it down to 50% width and it looks great in Chrome. Then you open Firefox and see this disaster:
Why does this happen?
My only theory is it’s just a bug in the way Firefox renders images. I haven’t been able to find any concrete evidence on the cause. However, there are a few bug reports out there related to the image downscaling method used in Firefox.
What can I do about it?
Luckily for us, Mozilla added an experimental CSS property called “image-rendering”. This property allows us to tell Firefox how we want it to display images that have been scaled up or down. The main stars of the show here are the values “optimizeQuality”, and “crisp-edges”. OptimizeQuality will smooth out edges and help preserve image quality. Crisp-edges will avoid image-altering smoothing techniques and preserve color position data.
In this case, we can use “optimizeQuality” to bring our image back to normal.
img {image-rendering: optimizeQuality;}
Behold!
You’ll notice the second image is a little fuzzier, but the letter “S” no longer has a slice of it missing. This property is still experimental, so your mileage may vary.
The image-rendering property isn’t currently supported in Chrome or Internet Explorer, but only Firefox seems to have this bug, so hooray for us!
The post Fixing Scaled Image Cutoff in Firefox with the “image-rendering” Property appeared first on Jordan Crown.