Internet Explorer and Safari Mobile CSS Filter Invert

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

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/

What's the CSS Filter alternative for Firefox?

Please check the Nihilogic Javascript Image Effect Library:

• supports IE and Fx pretty well
• has a lot of effects

You can find many other effects in the CVI Projects:

• they are also JS based
• there's a Lab to experiment

Good Luck

CSS filter grayscale image for IE 10

This approach only works in WebKit and Firefox. It doesn’t work in IE or Opera. WebKit is currently the only browser to support CSS filters, while Firefox supports SVG filters on HTML. Opera and IE support SVG filters, but only for SVG content.

There is no good way to make this work in IE10, as it dropped support for the legacy IE filters. There is a way, however, I’d not recommend it.

You can set IE10 to render using IE9 standards mode using the following meta element in the head:

<meta http-equiv="X-UA-Compatible" content="IE=9">

This will turn support back on for legacy IE filters. However, it has the side effect of dropping IE into IE9 mode, where the latest advancements in IE10 will no longer be supported. In your case it may be possible that you do not need these new features currently, but if you go down this road, you’d need to be aware of it when updating the site in future.

---

Related Topics