Safari (und Chrome Mobile) z-index Problem mit rotateY

Question

https://jsfiddle.net/nxbg7rq3/

In diesem Beispiel muss ich die .mask ganz oben auf dem .Screen sein. In Safari (und Chrome Mobile), die einfach nicht funktionieren will. Ich habe viel probiert und bin am Ende meiner Kräfte.

Es wäre nett, dies zu erreichen, ohne dass ich viel von der Struktur ändern müsste, die bereits in der Jfiddle vorhanden ist. Ta!

html

<div class="device"> 

    <div class="perspective"> 

     <div class="screen"> 
     <img src="http://lorempixel.com/400/200/" alt=""> 
     </div> 

     <div class="mask"></div> 

    </div> 

    </div> 

</div> 

css

.container { 
    -webkit-backface-visibility: visible; 
    z-index: 0; 
    transform: translate3d(0px, 0px, 0px); 
    position: absolute; 
    top: 20%; 
    width: 200px; 
    height: 300px; 
} 

.device { 
    -webkit-transform-origin: left center; 
    transform-origin: left center; 
    -webkit-transform: translate3d(-38%, -50%, 0) scale(1); 
    transform: translate3d(-38%, -50%, 0) scale(1); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    height: 100%; 
} 

.perspective { 
    perspective: 114.35897435897436em; 
    -webkit-perspective-origin: 0% 50%; 
    perspective-origin: 0% 50%; 
    width: auto 
} 

.screen { 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform-origin: 67.5% 50%; 
    transform-origin: 67.5% 50%; 
    -webkit-transform: translateY(-51%) scale(1.07) rotateY(34deg); 
    transform: translateY(-51%) scale(1.07) rotateY(34deg); 
    position: absolute; 
    top: 50%; 
    left: 2.5%; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    outline: 5px solid #fa5d86; 
    z-index: 0; 
} 

.screen img { 
    width: 400px; 
    height: 300px; 
} 

.mask { 
    -webkit-transform-style: flat; 
    transform-style: flat; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    max-height: 100%; 
    border: 5px solid black; 
    z-index: 100; 
} 

Answer 1

Sie doppelt .mask verwenden kann? Beispiel:

<div class="container"> 

    <div class="device"> 
    <div class="mask" style="position: absolute;"></div> 
    <div class="perspective"> 

     <div class="screen"> 
     <img src="http://lorempixel.com/400/200/" alt=""> 
     </div> 

     <div class="mask" style="opacity: 0;"></div> 

    </div> 

    </div>