title: Mix-blend-mode: Multiply Bug in Firefox
body: <p>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?</p>
  
  <p>Here's a link to the issue recreated in Codepen: <a href="http://codepen.io/anater/pen/xGWddq" rel="nofollow">http://codepen.io/anater/pen/xGWddq</a></p>
  
  <pre><code>.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%);
  }
  </code></pre>
  
  <p>This does not occur in Chrome or Safari, it is isolated to Firefox.</p>