How to hack unsupported mix-blend-mode CSS property?

Question

I'm programming gallery of images, with specific hover effect. When user comes over the image, I use ::before pseudoelement to create "curtain" over the div with image using mix-blend-mode CSS property:

div.img::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    mix-blend-mode: soft-light;
    background-color: red;
}

Resulting effect is like this:

But unluckily, IE (and some others according to caniuse) does not support this property and displays full red rectangle over the image and therefore it is not visible.

Is it possible to hack this mix-blend-mode behaviour to act like in Firefox or Chrome?

If not, is it possible to hide covering div or set it semi-transparent if and only-if mix-blend-mode is not supported?

Thank you

Trying using the `opacity` property and if that doesn't work, why not use RGBA? — Waxi, Sep 16 '15 at 16:28

score 14 · Answer 1 · answered Jul 25 '17 at 22:27

14

I know this is an old question, but you can also use the @supports feature query to detect if a certain property is or isn't available.

@supports not (mix-blend-mode: multiply) {
  .image {
    ...
  }
}

If you're interested, you can read more about the feature query at: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

answered Jul 25 '17 at 22:27

11

main issue with this is that ie 11 doesnt support @supports or mix-blend-mode https://caniuse.com/#search=supports – jopfre Nov 02 '17 at 08:41
2

That being the case @jopfre then you can simply use it as progressive enhancement. Set a fallback (opacity etc), and then if `@supports`... then write the code for the souped up version. – fredrivett Mar 19 '18 at 14:57

Richard Peterson · Accepted Answer · 2015-09-17T20:43:30.923

If you don't want to use plain opacity as a fallback:

Approaches to cross-browser support

Javascript polyfill This will be slow, and will not allow you to easily animate. However, it will let you create an alternate image for each of your matching images, and you can then fade the opacity or do other CSS transition tricks between the two.

http://codepen.io/brav0/pen/bJDxt (not my pen - uses multiply, not soft light)

Server side processing Wouldn't be my first choice, but if you control the server-side code, you can prepare alternate images using server side imaging libraries (GD, etc)

Only enabling the effect for supporting browsers

Css hacks for detecting IE

@media screen { @media (min-width: 0px) {
    div.img::after{ ... }
} }

Using JavaScript

if (window.getComputedStyle(document.body).mixBlendMode !== undefined)
    $("div.img").addClass("curtain");

...and the CSS...

img.curtain::after { ... }

Thank you, especially for that JS solution that checks for attribute support. I just had to replace _backgroundBlendMode_ with _mixBlendMode_ and use _undefined_ without quotes. — Ján Janočko, Sep 17 '15 at 08:21

How to hack unsupported mix-blend-mode CSS property?

2 Answers2

Approaches to cross-browser support

Only enabling the effect for supporting browsers

Linked