Chrome/Safari最近是否改變了混合混合模式的處理方式

幾個星期前，我使用（當時）最新版本的Chrome（可能是v56或v57，但我不太確定）做了一個網頁， Safari和Firefox在開發期間（在OSX上）。 http://dirkluetter.de/projecttype/kamera Chrome/Safari最近是否改變了混合混合模式的處理方式

Firefox（v52 & v53）仍然按預期顯示頁面。

儘管最新的Chrome版本（v58）已不再適用。

我用混合混合模式和背景混合模式的CSS屬性工作得很好然後仍然在FF上。現在Chrome/Safari似乎忽略了該屬性，而Firefox仍然按照預期顯示該頁面。最近Webkit瀏覽器處理混合混合模式的方式有所改變嗎？我無法找到有關此變化的任何信息...有關混合模式和鉻的其他幾個問題，但我檢查與我的不相關的問題。

來源

2017-04-19 Hans Meiser

這看起來像重大更改，但我不知道爲什麼特別https://crrev.com/438298 –

我不確定到底發生了什麼，但是我可以通過在根元素中添加background: white並將mix-blend-mode移動到正文中的包裝元素來使其在Chrome中工作。

html { 
 
    background: white; 
 
    display: flex; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    background-blend-mode: luminosity; 
 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/15/AreeiroMetroLx2.JPG); 
 
    background-color: #006699; 
 
    background-size: cover; 
 
} 
 

 
div { 
 
    mix-blend-mode: multiply; 
 
} 
 

 
p { 
 
    color: magenta; 
 
}

<div> 
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin felis ultrices lacus venenatis, in porta dui sagittis. Aliquam maximus massa diam, ut elementum sem efficitur mollis. Proin mattis magna ante, sit amet semper nulla semper at. Vivamus hendrerit tortor nec lacus venenatis, vitae molestie odio consectetur. Vivamus fermentum id ligula et scelerisque. Etiam eu metus nec lacus aliquet convallis at sed mi. Integer euismod lorem risus, sit amet molestie mi egestas vitae. In quis consequat ligula. Pellentesque erat elit, ultricies et massa ut, cursus congue dolor. Suspendisse risus est, aliquet nec justo a, bibendum convallis justo. 
 
</div>

來源

2017-04-19 20:17:59

雖然解決辦法，我想這是最好的（也是唯一的？）解決方案。希望Chrome開發團隊儘快解決這個問題。 –

@HansMeiser明星這個bug https://crbug.com/711955 –

問題仍然存在於V59 –

Chrome/Safari最近是否改變了混合混合模式的處理方式

回答

相關問題