CSS-混合混合模式：差异混淆

Question

我一直在研究CSS中的mix-blend-mode，这似乎是一个强大的属性！ 但是，我对这实际上是如何工作感到非常困惑。我的结果不可预测。 以这个codepen为例：

https://codepen.io/KingKabir/pen/ONyPeg

主体的背景设置为深色，而其他部分的背景设置为白色。

body { background-color: #000 }
section:nth-of-type(even) { background-color: #FFF}

现在尝试将主体的背景颜色更改为白色，并注意菜单如何将其颜色更改为黑色。这里发生了什么？两个部分的背景颜色相同吗？

如果将第一部分的背景颜色专门设置为白色，则它会按预期工作。但是如果第一部分没有背景色并且主体设置为白色，则不会。结果不应该一样吗？

我正在处理的项目中确实有这个问题，我不知道发生了什么。编辑：我正在使用谷歌浏览器83.0.4103.106

编辑：这是我的意思的图片