Chrome Mixing Issues

Question

I am trying to use mix-blend-mode on a page that contains instances of css opaque transitions. What seems to be happening is that the div containing the mix-blend-mode is displayed, as without the blend mode during the transition, or rather, during the animation. I found that this is a problem in Chrome.

In my example, when a div converts the display of the blend mode correctly over the image, but not over the background of the page. When the transition is complete, it returns to display as it should. In other words, the mixed div looks like solid yellow on a black background while the animation continues, but since it is set to dark, it should be invisible on a black background. Once the animation is over, it will appear as it should. This is normal for an image.

I tried this with Firefox and Safari and there seems to be no problem.

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

Change I found another instance where this happens, which is not related to the animation. It is strange when the position of one div is set to fixed, and the second to absolute, see here: http://codepen.io/anon/pen/wooRME If the position of div.image is changed to absolute, then the blending mode looks 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; } 

Answer 1

So, I think I solved the problem. During the animation, it seems that the body is not considered an element, so yellow appears in 1 opacity. I tested in a different blending mode and it always looks yellow. (if set to "difference", the expected result will be white, not yellow)

So fix it? just add a div with 100% dimensions and a black background! Then the yellow color has something that can be mixed and will not appear.

Here is the code that worked in your pen:

html - added bg div:

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

it 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 that the margin is not yellow either. Alternatively, div divs can be sized to fit the body.

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

---

EDIT:

For another codef, the problem was not the same. They tried to darken the image and the yellow rectangle on a gray background.

If they did not want the yellow color to appear on their gray background, the solution was to simply put the image inside the div and use :: after to mix the color. Or even just create an empty div, give it an image as a background and use :: after.

 <div/> 

from:

 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 that:

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

without a "background image" in a css div.