在FF和Chrome中mix-blend-mode multiply的工作方式不同

Question

我正在修改mix-blend-mode属性以将滤色器应用到图像上，但似乎mix-blend-mode multiply在Chrome和FF中的工作方式不同。

​

.filter {
  position: relative;
}
.filter::before,
.filter::after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  z-index: 1;
}
.filter--rise {
  -webkit-filter: brightness(1.2) contrast(0.9) saturate(90%);
  filter: brightness(1.2) contrast(0.9) saturate(90%);
}
.filter--rise::before {
  background: -webkit-radial-gradient(circle, rgba(236, 205, 169, 0.2) 55%, #321E07 100%);
  background: radial-gradient(circle, rgba(236, 205, 169, 0.2) 55%, #321E07 100%);
  mix-blend-mode: multiply;
  opacity: 0.8;
}
.filter--rise::after {
  background: -webkit-radial-gradient(circle, rgba(246, 189, 57, 0.6), transparent 100%);
  background: radial-gradient(circle, rgba(246, 189, 57, 0.6), transparent 100%);
  mix-blend-mode: overlay;
  opacity: 0.6;
}

<figure class="filter filter--rise">
  <img src="http://i.imgur.com/KQ0U5BL.jpg" alt="">
  <figcaption>Rise</figcaption>
</figure>

​

这就是结果(左边是铬，右边是FF -预期的结果是FF)。

http://i.imgur.com/ySPTbFN.png

有人能给我解释一下为什么会这样吗？(为什么只使用这种模式，因为其他模式也是一样的，例如强光模式、叠加模式等)

Answer 1

这是an issue in Chrome 46 on Windows。看起来已经修复了47个。