The CSS Filter method using SVG adopted by many for FF is no longer working.
To grayscale an image, many websites reference using an SVG file for Firefox due to lack of support of the filter: grayscale option. This website has an example: http://labs.voronianski.com/css3-grayscale/
However, the FF v38.0.5 does not support this. I was able to get it to work with filter: grayscale(1); but it breaks backward compatibility. How do we assure that old FF's will work as well as new ones? When did this change?
Thanks!
George
All Replies (3)
On the test site, the image on the right is grayed for me. You still see it in color? We probably have different add-ons and customized settings, so I'm not sure what the "default" behavior is.
The "Live example" in the Grayscale section of the MDN page uses filter: grayscale(100%) so I think that should still be supported:
geobehr said
To grayscale an image, many websites reference using an SVG file for Firefox due to lack of support of the filter: grayscale option. This website has an example: http://labs.voronianski.com/css3-grayscale/ However, the FF v38.0.5 does not support this. I was able to get it to work with filter: grayscale(1); but it breaks backward compatibility. How do we assure that old FF's will work as well as new ones? When did this change? Thanks! George
Thanks that answers part of my question (ie Filter was first supported in FF 34 and fully supported in FF 35. The 2nd part not answered is how do we maintain backward compat for FF <34?
Here's a website that shows the SVG grayscale approach no longer working: http://mattsnider.com/applying-grayscale-using-css-filters/
I think the difference between the two sites is that the second one has a missing file (screen shots attached).
