mix-blend-mode broken when html has "perspective"

Question

By applying "perspective" to the html element my mix-blend-mode seems to get ignored by Firefox.

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

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

What is the issue with that? I am using Firefox 40.

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

score 2 · Accepted Answer · answered Aug 12 '15 at 20:47

It looks like you can achieve your expected result by simply adding a mix-blend-mode to the html element.

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

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

I'm not entirely sure what was causing the issue, but both perspective and mix-blend-mode will create a new stacking context so it may have something to do with that...

Stackingcontext might be an issue. I fliped out perspective with opacity: 0.99and got the same result. — Type-Style, Oct 29 '15 at 14:25

score 1 · Answer 2 · answered Aug 14 '15 at 02:57

Despite the fact that, when defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself, you still have to call on your child element, and assign your desired CSS perspective properties to it, in order to have it running cross-browser. The codes below are working 100% an any existing browser;

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;  
} 

div {
    height: 100px; line-height: 100px;
    font-size: 40px;
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

.background-image{
    perspective: 50px; // calling on child element and applying the perspective
}

What was the issue?

Defining your perspective properties under the HTML tag causes issues for cross-browsers compatibility, as you may have numerous elements under your main html tag, and the browser may not distinguish how and which element to apply it to. It is true that the perspective property only affects 3D transformed elements, but it's not a guaranty that any browsers detects and applies it to the image specified as a main background. I hope it helped.

mix-blend-mode broken when html has "perspective"

2 Answers2