Проблема Safari с анимацией сетки

Question

Я нашел эту анимированную сетку 80-х. Это работает штрафы на Chrome и Firefox, но проблема с Safari.

В Safari Grid появляются линии, когда анимация запущена, они не находятся за тенью 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.