Skip to content

Instantly share code, notes, and snippets.

@gelicia
Created August 1, 2014 19:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gelicia/6fdcc7e3f8114f03758e to your computer and use it in GitHub Desktop.
Save gelicia/6fdcc7e3f8114f03758e to your computer and use it in GitHub Desktop.
CSS filter invert question
Hey Modernizr, I saw this was a way to ask a question without doing an IRC issue, I was wondering if this has come up before.
Basically, my webpage has an image that needs to be inverted when something is selected. There's all the various filters but the two that actually do something are these two:
1.) -webkit-filter: unquote("invert(100%)");
This is what works in webkit supported browsers like Chrome and some others
2.) filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#invert");
This is what works in Firefox. It's an SVG filter that you can apply to the image that will invert the color.
IE does not support either of these, and I would like to remove the thing that toggles this when the user has IE, or any browser that does not support one of these things. The modernizr detectors I was using was cssfilters and svgfilters.
The problem is IE does support svgfilters, but not against any image like the way we're using it in that second filter. It only supports svg filters against svg.
This means that both Firefox and IE look the same to modernizr. It's almost like svgfilters needs more granularity - does it support svgfilters for svg only or does it support svg filters for everything.
Have you ever heard of anyone else running into this?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment