サファリ（及びクロムモバイル）z屈折率の問題回転Y

Question

https://jsfiddle.net/nxbg7rq3/

この例では、I .screenの上に完全になるように.maskを必要とします。 Safari（およびChromeモバイル）では、仕事をしたくないだけです。私はたくさん試して、テザーの終わりにいます。

これを達成するには、jfiddleに既に存在する構造をたくさん変更する必要がありません。 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あなたは二重の.maskを使用することができます

.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

？例：

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