jquery - css filter invert() not working on mozilla firefox?

Question

I'm having an annoying issue with the css filter invert(); on Firefox 25. This is the code, inserted inside jQuery .ready() context:

$('#colorcontrast').bind('click', function() {

        var css = 'html {'+
                    ' filter:invert(100%);' + 
                    ' -webkit-filter: invert(100%);' +                    
                    ' -o-filter:invert(100%);' + 
                    ' -ms-filter:"invert(100%)"; }';      

        if (!window.counter) { 
            window.counter = 1;
        } else  { 
            window.counter ++;
            if (window.counter % 2 == 0) { 
                css = 'html {'+
                    ' -webkit-filter:invert(0%);' +
                    ' -moz-filter:invert(0%);' +
                    ' -o-filter:invert(0%); }';
            }
        };

        console.log(css);

        $('#contrast').html(css);

    });

It works fine on Chrome and IE9, but not in Firefox 25. When I visited its doc reference page using Firefox, I realized the live demo wasn't working! Does anyone know something about? And could anyone point me other way or solution to apply such filter? Thanks in advance.

Answer 1

You may want to use a SVG filter. I basically a vector-shape graphic language which uses a XML structure. With this you can not only create vector shapes but also modifie different element.
I'm not sure how a SVG file does generate a specific effect(why it wouldn't support the normal invert(), but this one does support).

The xml file i used for this:

<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>

The css + xml url i used:

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");

I know the color isn't excactly the same as the original one, but it is an alternative. Note this is just a 'hack' for firefox, you can just use static filters for other browsers.

---

More info about this subject:

Latest version

W3School tutorial

Morzilla explenation

a SVG generator online.

More info about SVG in Internet Explore

---

You can't find all effects in the generator, but i might be usefull to see different structure with different effects. You might want to read some basic understanding of XML first :)

jsFiddle

---

Other topic about this matter: What's the CSS Filter alternative for Firefox?