mix-mix-mode rotto quando html ha "prospettiva"

Question

Applicando "prospettiva" al html elemento mia mix-mix-mode sembra avere ignorato da Firefox.

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

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

Qual è il problema? Sto usando Firefox 40.

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

Answer 1

Sembra che si può ottenere il risultato atteso semplicemente aggiungendo un mix-mix-mode per l'elemento 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>

Non sono del tutto sicuro di quello che stava causando il problema, ma entrambi prospettiva e mix-mix-mode creerà un nuovo contesto di stratificazione così essa può ha qualcosa a che fare con questo ...

Answer 2

Nonostante il fatto che, quando si definisce la proprietà perspective per un elemento, è il BAMBINI elementi che ottengono la vista prospettica, NON dell'elemento stesso, si ancora deve chiamare sul vostro elemento figlio, e assegnare i vostri desiderati CSS proprietà prospettiva ad essa, in modo da avere in esecuzione cross-browser . I codici seguenti funzionano al 100% come browser esistente;

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 
} 

Qual è stato il problema?

Definire i tuoi prospettiva proprietà sotto il tag HTML provoca problemi per la compatibilità cross-browser, come si può avere numerosi elementi sotto la vostra html tag principale, e il browser non può distinguere come e quale elemento di applicarla a. È vero che la proprietà della prospettiva interessa solo gli elementi trasformati in 3D, ma non è una garanzia che qualsiasi browser la rileva e la applica all'immagine specificata come sfondo principale. Spero sia stato d'aiuto.