Mix-blend-mode: Multiply Bug in Firefox

Question

I'm attempting to implement mix-blend-mode in Firefox, which appears to be supported, but I only get black elements when using 'multiply'. Does anyone know why this happens? How to fix it?

Here's a link to the issue recreated in Codepen: http://codepen.io/anater/pen/xGWddq

.circle-red,
.circle-blue{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  mix-blend-mode: multiply;
}

.circle-red{
  background: red;
  top: 50%;
  left: 50%;
  transform: translate(-75%, -50%);
}

.circle-blue{
  background: blue;
  top: 50%;
  left: 50%;
  transform: translate(-25%, -50%);
}

This does not occur in Chrome or Safari, it is isolated to Firefox.

Answer 1

But the correct result when multiplying red and blue is black

To test it, better set different colors, cyan and yellow for instance

.circle-red,
.circle-blue{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  mix-blend-mode: multiply;
}

.circle-red{
  background: rgb(255, 255, 0);
  top: 50%;
  left: 50%;
  transform: translate(-75%, -50%);
}

.circle-blue{
  background: rgb(0, 255, 255);
  top: 50%;
  left: 50%;
  transform: translate(-25%, -50%);
}

<div class="circle-red"></div>
<div class="circle-blue"></div>

I can no longer test it, but in the previous version of Firefox, there was a problem involving the mix-blend-mode and the base element (in this case, body) missing a background-color.

Can you try to set

body {
    background-color: white;
}

Answer 2

I had a similar issue, and this solved it for me: Set your color (being multiplied) using rgba with an "a" value of 0.99 instead of plain rgb.