混合混合模式乘法在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中得到修復。