混合混合模式乘法在FF和Chrome中的工作方式不同

Question

我正在修改混合混合模式属性以将滤色器应用到图像上，但它看起来像混合混合模式乘法以不同方式工作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中得到修复。