Safari(和 Chrome Mobile)使用 rotateY 的 z 索引问题

Question

https://jsfiddle.net/nxbg7rq3/

在这个例子中，我需要 .mask 完全位于 .screen 的顶部。在Safari（和Chrome Mobile）中，这只是不想工作。我已经尝试了很多，并且处于系绳的尽头。

完成

此操作会很好，而我不必更改jfiddle中已经存在的许多结构。哒！

.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

你可以使用双 .mask？例：

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