Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css filter invert() not working on mozilla firefox?

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.

like image 483
Shad Avatar asked Oct 30 '13 14:10

Shad


2 Answers

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?
like image 106
nkmol Avatar answered Oct 22 '22 19:10

nkmol


Firefox doesn’t support CSS filters yet. At all.

Also, you should be toggling a class, not dynamically creating stylesheets.

like image 20
Ry- Avatar answered Oct 22 '22 20:10

Ry-