Safari的网格动画问题

Question

我找到了这个动画的80年代网格。可以在Chrome和Firefox上正常运行，但Safari出问题。

在Safari上，运行动画时弹出的网格线不在ellipse阴影后面。 https://codepen.io/TonyBaldascino/pen/kXjGLk

body {
  background-color: #0e1416;
}

.grid {
  width: 100%;
  height: 600px;
  overflow: hidden;
  perspective: 450px;
}

.grid-fade {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 50%, rgba(14, 20, 22, 0) 0%, #0e1416 80%);
}

.grid-lines {
  width: 100%;
  height: 200%;
  background-image: linear-gradient(to right, rgba(7, 203, 121, 0.3) 1px, transparent 0),
    linear-gradient(to bottom, rgba(7, 203, 121, 0.3) 1px, transparent 0);
  background-size: 45px 30px;
  background-repeat: repeat;
  transform-origin: 100% 0 0;
  animation: play 15s linear infinite;
}

@keyframes play {
  0% {
    transform: rotateX(45deg) translateY(-50%);
  }
  100% {
    transform: rotateX(45deg) translateY(0);
  }
}
  

    <div class="container">
      <div class="grid">
        <div class="grid-fade"></div>
        <div class="grid-lines"></div>
      </div>
    </div>

图片来自我的实验，但作者也发生了同样的情况。 左边是Chrome，右边是Safari，在Safari上，网格线一直延伸到边缘，但我喜欢它在Chrome上的外观，或者至少是在Chrome上的外观。