css – 混合混合模式,当html有“透视”

通过将“透视图”应用于html元素,我的混合混合模式似乎被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

解决方法

通过简单地将混合模式添加到html元素,您可以实现预期的结果.

Working Example

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,orange);
  mix-blend-mode: screen;
}

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

我不完全确定是什么导致的问题,但透视和混合混合模式将创建一个新的堆叠上下文,这可能与…有关系…