Why does CSS mix-blend-mode "darken" produce a different result than Photoshop?

Question

As far as I understand, CSS' mix-blend-mode is supposed to behave the same way as Photoshop' Blend mode. However, in the following simple example I am getting different results and I am not sure why.

Example

A cyan rectangle (#00ffff) half overlapping a red rectangle (#ff0000). The blend mode of the cyan rectangle is set to "darken". Because "darken" picks the darkest of each channel (RGB) for the overlapping pixels, and all three channels are 0 in at least one of the two rectangles, I would expect the overlapping area to be black.

Result in Photoshop

(cyan rectangle outlined for clarity)

• The cyan rectangle is not visible on the black background (expected)
• The overlapping area is also black (expected)

Result on web (Latest Chrome, 70.0.3538.102)

• The cyan rectangle is visible on the black background (not expected)
• The overlapping area is dark (#2d0c1b), but not black (not expected)

Live example: CodePen

So... why is the result not the same? What am I missing?

Answer 1

The result is the same but the black background is applied to the body and not the to parent of the element where you applied the mix-blend-mode.

Moving the black background there will fix the issue:

body {
  background: black;
}
.group {
 background:#000;
}
.a, .b {
  width: 200px;
  height: 100px;
}

.a {
  background: #00ffff;
}

.b {
  background: #ff0000;
  margin-top: -50px;
  mix-blend-mode: darken;
}

<div class="group">
  <div class="a"></div>
  <div class="b"></div>
</div>

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.^ref