микс-смесь-режим нарушается, когда HTML имеет «точку зрения»

Question

пути применения «точки зрения» к 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

Answer 1

Похоже, что вы можете добиться ожидаемого результата, просто добавив микс-Blend-режим 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, #000, orange); 
 
    mix-blend-mode: screen; 
 
}

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

Я не совсем уверен, что вызывает проблемы, но и в перспективе и смешайте-смесь-режим создаст новый контекст стэка поэтому он может имеют какое-то отношение к этому ...

Answer 2

Несмотря на то, что при определении свойства для элемента perspective это ДЕТЯМ элементы, которые получают вид в перспективе, НЕ сам элемент, вы еще должны позвонить на ваш дочерний элемент, и назначить требуемые CSS перспективные свойства к нему, для того, чтобы он работает кросс-браузер , Коды ниже работают на 100% любого существующего браузера;

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 
} 

В чем была проблема?

Определение ваших перспективных свойства под HTML тег вызывает проблемы совместимости кросс-браузеров, так как вы можете иметь множество элементов под главной html тега, а браузер не может различить, как и какой элемент применить его к. Верно, что свойство перспективы влияет только на 3D-преобразованные элементы, но это не гарантирует, что любые браузеры обнаруживают и применяют его к изображению, указанному в качестве основного фона. Надеюсь, это помогло.