mix-blend-mode issues in Chrome

Question

I've been trying to use the mix-blend-mode on a page that has contains instances of css opacity transitions. What appears to be happening is that the div containing the mix-blend-mode displays as it would without the blend mode during the transition, or rather, while the animation is in progress. I've only found it to be an issue in Chrome.

In my example, while the div is transforming the blend-mode displays correctly over the image but not over the page background. Once the transition is complete it goes back to display as it should. In other words the blended div appears as solid yellow on the black background while the animation is ongoing but since it is set to darken it should be invisible over the black background. Once the animation is finished it appears as it should. It appears normal over the image.

I've tried this is Firefox and Safari and there seems to be no issue.

Pen: http://codepen.io/anon/pen/QGGVOX

Edit - I've found another instance where this occurring that doesn't involve any animation. Weirdly it happens when the position of one div is set to fixed while the other is absolute, see here: http://codepen.io/anon/pen/wooRME If the position of the div .image is changed to absolute then the blend-mode appears normal.

body {
background: #000;
}

.blend {
  height: 650px;
  width: 50%;
  background-color: yellow;
  mix-blend-mode: darken;
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0px;
  z-index: 100;
}

img {
  position: relative;
  z-index: 0;
}

Helga

I'm having the exact same problem and losing my mind over it. Please post if you've figured out any workaround in the past month! – Soddy

Answer 1

So, I think I figured the problem. During the animation, it seems like the body doesn't count as an element, thus making the yellow appear at 1 opacity. I tested with other blend mode and it always appears yellow. (when set to 'difference the expected result would be white instead of yellow)

So the fix? just add a div with 100% sizes and a black background! Then, the yellow has something to blend in and doesn't show up.

Here's the code that worked in your pen:

html - added the bg div:

<div class="bg"></div>
<div class="blend"></div>
<img src="http://lorempixel.com/500/500/">

it's css:

.bg{
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
}

I also changed the body to fill the window so the margin weren't yellow too. Alternatively, the blend div could be sized in function of the body.

tagging @chrscblls since they wanted to know if you found anything.

---

EDIT :

For the other codepen the problem wasn't the same tho. They were trying to darken an image and a yellow rectangle onto a gray background.

If they didn't want the yellow to show on their gray background, the solution was simply to put the image inside a div and use ::after to blend in a color. Or even just make an empty div, give it the image as background and use the ::after.

this:

<div/>

with:

body {
  background: #333;
}

div{
  position:fixed;
  width: 500px;
  height: 500px;
  top:50px;
  left: 50px;
  mix-blend-mode: darken;
  background-image: url("http://lorempixel.com/500/500/");
}
div::after {
  content: "";
  height: 100%;
  width: 100%;
  background-color: yellow;
  mix-blend-mode: darken;
  position:absolute;
  opacity: 1;
  left: 0;
  top: 0;
}

or this:

<div><img src="http://lorempixel.com/500/500/"></div>

without the 'background-image' in the div css.

Monophysite