I'm a programmer specialising in performant and scalable systems using PHP and Ruby and cooking


Published:

CSS grayscale and FireFox

On Recombu's cars site the CSS "filter" property is used to 'grey out' expired deals. Previously this was using a simple desaturate svg with the greyscale mode like this:

filter: url("../bundles/cars/images/desaturate.svg#greyscale")  

This works great in all browsers that support the filter property and svgs, however this does not work in Firefox (tested in 17+). Instead simply hiding the image that the filter is meant to be applied to.

This appears to be an issue with the way FireFox uses the svg filters. You can, however, work around this by providing 2 filter properties. 1 for chrome etc and 1 for FireFox. You need to use a specific image. Fortunately this is provided by the data uri scheme.

filter: url("../bundles/cars/images/desaturate.svg#greyscale");  
filter: url('data:image/svg+xml;utf8,<svg xmlns=\'w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale');