-1

I have the following snippet, and it works in all browsers except(big suprise) Internet explorer. The image remains black, without shadows, without anything really in IE.

I am not trying to get the DXTransform working, I want to use the css3 filter feature. I was hoping -ms-filter or filter would trigger the css3 filter, but I can't find the right CSS nice to get this feature working.

It should work as far as I can tell, it's an inline-block element, has all the bells and whistles... yet it's just a boring background image(At least THAT part works, it's something).

.uiicon {
 width:64px;
 height:64px;
 display:inline-block;
 -webkit-background-size: cover; /* For WebKit*/
 -moz-background-size: cover;    /* Mozilla*/
 -o-background-size: cover;      /* Opera*/
 background-size: cover;    
    
}
.uiicon-filter-darkgreen-dropshadow {
 
 -webkit-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
 -moz-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
 -o-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
 -ms-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
 filter:invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
}
.uiicon-filter-darkgreen-dropshadow:hover {
 -webkit-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
 -moz-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
 -o-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
 -ms-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
 filter:invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
 cursor:pointer;
}

.icon1 {
 background-image: url("https://i.imgur.com/PGy70kn.png");
 background-image:url("https://i.imgur.com/PGy70kn.png"),none;
 background-position: top left;
 background-repeat: no-repeat;
 width: 200px;
 height: 50px;
}
<div class="uiicon icon1 uiicon-filter-darkgreen-dropshadow"></div>
Tschallacka
  • 27,901
  • 14
  • 88
  • 133
  • Note that you should have the not-prefixed property *last*, after the prefixed lines. – Bram Vanroy May 28 '15 at 12:23
  • Care to elaborate why? it's the first time I hear this. – Tschallacka May 28 '15 at 12:35
  • 1
    Even though they look identical, prefixed versions may not implement behaviour as expected by w3c. Therefore it is best to set the unprexifed version last to overwrite any vendor prefixed implementation. Here is a good read with an example included : https://css-tricks.com/ordering-css3-properties/ – Bram Vanroy May 28 '15 at 12:40

2 Answers2

4

Support for -ms-filter was deprecated in IE9 and removed entirely in IE10.

Rob
  • 14,746
  • 28
  • 47
  • 65
  • Okay, but it doesn't adhere to filter either. It should at least listen to filter then. Do you have an alternative to get the css3 working? – Tschallacka May 28 '15 at 12:13
  • IE does not support CSS filters: http://caniuse.com/#search=CSS%20filter I don't recall if there is a polyfill for that. – Rob May 28 '15 at 12:16
  • No, there is not a polyfill for hue-rotate. As far as I know. – Ionut Necula Mar 25 '16 at 11:42
  • This is the correct answer and should be accepted by @Tschallacka. IE has no support whatsoever for filters. There are no polyfills or workarounds through CSS. The only way you can get it working is through server-side scripting or Javascript libraries. – maiorano84 Jan 18 '17 at 05:35
0

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.

From: CSS filter grayscale image for IE 10

Community
  • 1
  • 1
Oliver Hemsted
  • 571
  • 2
  • 13
  • Uhm, that is not what I want... I had to patch up various things already to support things like String.startsWith. No way I want to patch up the missing features of css in IE9... That would break my app completely. What my script does if you run it is take a black and white image and turns it into a coloured image via the css3 filters. It works in all browsers... except the blue one. – Tschallacka May 28 '15 at 12:35
  • 1
    "It works in all browsers except IE". That's a shortcut comment key for me. – Rob May 28 '15 at 12:37