Chrome / Safari 最近是否更改了 mix-blend-mode 的处理方式

Question

几周前我制作了一个网页，使用（当时）最新版本的 Chrome（可能是 v56 或 v57，但我不确定），开发期间的 Safari 和 Firefox（在 OSX). http://dirkluetter.de/projecttype/kamera

Firefox（v52 和 v53）仍按预期显示页面。

虽然最新的 Chrome 版本 (v58) 不再存在。

我使用了 mix-blend-mode 和 background-blend-mode CSS 属性，这些属性当时运行良好 - 并且在 FF 上仍然如此。现在 Chrome / Safari 似乎忽略了属性，而 Firefox 仍按预期显示页面。 Webkit 浏览器处理 mix-blend-mode 的方式最近有什么变化吗？我找不到关于此更改的任何信息...还有其他几个关于混合混合模式和 chrome 的问题，但我检查过的那些与我的无关。

Answer 1

我不确定到底发生了什么，但我可以通过将 background: white 添加到根元素并将 mix-blend-mode 移动到包装器来让它在 Chrome 中工作body 内的元素。

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>

Chrome / Safari 最近是否更改了 mix-blend-mode 的处理方式

Did Chrome / Safari recently change the way mix-blend-mode is handled

html

css

firefox

google-chrome

mix-blend-mode