title: Safari (and Chrome Mobile) z-index issue with rotateY
body: <p><a href="https://jsfiddle.net/nxbg7rq3/" rel="nofollow noreferrer">https://jsfiddle.net/nxbg7rq3/</a></p>
  
  <p>In this example I need the .mask to be completely on top of the .screen. In Safari (and Chrome Mobile) that just doesn't want to work. I've tried a lot and am at the end of my tether.</p>
  
  <p>It'd be nice to accomplish this without me having to change a lot of the structure that's already present in the jfiddle. Ta!</p>
  
  <p>html
      </p>
  
  <pre><code>  &lt;div class="device"&gt;
  
      &lt;div class="perspective"&gt;
  
        &lt;div class="screen"&gt;
          &lt;img src="http://lorempixel.com/400/200/" alt=""&gt;
        &lt;/div&gt;
  
        &lt;div class="mask"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>css</p>
  
  <pre><code> .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;
  }
  </code></pre>