How to Hack Unsupported Mix-Blend-Mode CSS Property

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

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 { ... }

Elements set with mix-blend-mode break other element with mix-blend-mode property (Chrome)

The problem was caused by the fact that I had an empty <div> as the first element inside my <body></body> acting as a background that had a z-index property of a negative number, or at least a non-zero value perhaps. Once I set the z-index of my background <div> to 0 or removed the z-index property entirely then the mix-blend-mode on the h1 problem stopped occurring for good.

HTML:

<body>
  <div id="bg"></div>
  ...
  ...
</body>

Problem CSS:


#bg {
  background-image: url("../img/someImage.jpg");
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -10;
}

I do not understand why this solved the problem as I figured out the solution by accident.

Firefox mix-blend-mode bug

I know this is an older question, but I ran into it and found the solution. Add this CSS to the element with the blend mode.

transform: translateZ(0);

How to Hack Unsupported Mix-Blend-Mode CSS Property