Invert Filter Not Working on Ie and Safari

Invert filter not working on IE and safari

The filter property is an experimental feature and does not work on IE.

To do some color inversion on image, you can do a sprite with the two separate images and show them in CSS with background-image and background-position properties for example.

See this link with sprites examples

As it said :

A web page with many images can take a long time to load and generates
multiple server requests.

Using image sprites will reduce the number of server requests and save
bandwidth.

You can do a sprites with all your images and reversed images and then get the background-position CSS with this website

If it's still too slow, you can optimize this image on TinyPNG, see this link :
https://tinypng.com/

CSS property filter: invert(80%) not working with IE

Invert is not supported in IE

caniuse.com

Internet Explorer and Safari Mobile css filter invert

CSS is fully functional only in select browsers , I agree.

For more flexibility you can use javacript which is compatible with all browsers

function invert_img(rgb) {
    rgb = [].slice.call(arguments).join(",").replace(/rgb\(|\)|rgba\(|\)|\s/gi, '').split(','); //locate different values of rgb
    for (var counter = 0; counter < rgb.length; counter++) 
        rgb[counter] = (counter === 3 ? 1 : 255) - rgb[counter];
    return rgb.join(", ");
}

console.log(
    invert_img("rgb(150, 0, 0)"), // 0, 150,150
    invert_img("12, 0, 0"), // 0, 12, 12
    invert_img(25, 0, 0) // 0, 25, 25
);

Need more help? Let me know

CSS3 filter doesn't work on Opera,Internet Explorer,Mozilla Firefox

Mozilla Firefox: support without prefix is coming in Firefox 34 according to MDN (stable version currently at 32). For a few weeks, you'll need the SVG filter via url() if I understood well.

Note: if you support Firefox ESR - Extended Support Release - that may be deployed by quite a few IT departments and organizations, Fx 24 ESR won't be supported after october 2014 but Fx 31 ESR will be till mid or end 2015 I guess. (source)

CSS -webkit-filter: grayscale(0%) don't work in IE 10 and Safari

use this for all browsers

-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */

refer http://labs.voronianski.com/css3-grayscale/

css filter invert() not working on mozilla firefox?

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?

---

Related Topics