CODEWITHSUNDEEP
csscss-transformsblending
Type-Style
Type-Style

Reputation: 1831

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

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

Upvotes: 12

Views: 1330

Answers (2)

Pouya Ataei
Pouya Ataei

Reputation: 2169

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.

Upvotes: 1

apaul
apaul

Reputation: 16170

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...

Upvotes: 2

Related Questions