CSS showcasing stamp effect not working in IE 11

Question

I have following CSS snippet to prepare a rubber stamp effect which works fine in Google chrome, Firefox but not in IE 11. Any idea what mistake I am doing here. In IE11 it looks black.

    .stamp {
      position: relative;
      display: inline-block;
      color: red;
      padding: 15px;
      background-color: white;
      box-shadow:inset 0px 0px 0px 10px red;
      transform: rotate(-25deg);
      text-align:center;
    }

    .stamp:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url("http://i.imgur.com/5O74VI6.jpg");
      mix-blend-mode: lighten;
    }

<p class="stamp"><span>COD</span><br>5c84b19c98b21f292c9d086f
        </p>

For starters, the [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) property isn't supported by Internet Explorer at all. — cabrerahector, Mar 21 '19 at 21:02
These two property are causing issue in IE. Can we remove them in IE and apply them in chrome. Wanted to do it using CSS and not any javascript. Tried using @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) but no luck. background-image: url("http://i.imgur.com/5O74VI6.jpg"); mix-blend-mode: lighten; — Rajesh, Mar 21 '19 at 21:17
You can try [this](https://stackoverflow.com/questions/25158696/blend-modemultiply-in-internet-explorer) to add some CSS fallback rules for IE. And again, **IE doesn't support mix-blend-mode**. — cabrerahector, Mar 21 '19 at 21:34

score 0 · Answer 1 · answered Mar 21 '19 at 22:26

Not supported in ie. Your best bet may be to include the working css as is, then in a ie-specific media query, don't display that css and have a fallback display.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 /* IE10+ CSS styles go here */
}



@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

score 0 · Answer 2 · answered Mar 22 '19 at 07:15

As the comments have mentioned, mix-blend-mode is not supported in IE, and not supported on Edge too.

You could check this from:(1)https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode (2)https://caniuse.com/#search=blend

In my opinion, according to your code and example, there may be no perfect solution for it if you just want pure CSS.

But my suggestion is that you could use Javascript polyfill to try to achieve your requirement. For more, you could refer to this link:https://stackoverflow.com/a/32614511/10487763

CSS showcasing stamp effect not working in IE 11

2 Answers2