混合混合模式在html具有"透视"时被破坏

Question

通过将"perspective"应用于html元素,我的mix-blend-mode似乎被Firefox忽略了.

html {
    perspective: 800px; /* causing the issue */
}

div {
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

有什么问题？我使用的是Firefox 40.

http://codepen.io/Type-Style/pen/oXJbRE

Answer 1

看起来您只需向 html 元素添加 mix-blend-mode 即可达到预期结果。

工作示例

html {
  background-color: #111;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/210px-W3C%C2%AE_Icon.svg.png);
  background-repeat: no-repeat;
  perspective: 800px;
  mix-blend-mode: screen; /*see change here*/
}
div {
  height: 100px;
  line-height: 100px;
  font-size: 40px;
  color: #fff;
  background: linear-gradient(to bottom, #000, orange);
  mix-blend-mode: screen;
}

<div>Some Text</div>
<div>Some more Text</div>

我不完全确定是什么导致了这个问题，但是透视和混合混合模式都会创建一个新的堆叠上下文，因此它可能与此有关......