css - 带有 CSS 转换的 Safari 渲染错误 - 深度排序/z-index 问题？ (适用于 Chrome)

Question

对于我的网站，我正在使用这个螺旋动画:
Codepen
这是它在 Chrome 中的样子(应该是这样):

这就是它在 Safari 中的样子:

css 转换在谷歌浏览器中看起来很棒，但在 Safari 中它坏了。
我尝试了以下(如其他论坛/线程中所述)，但没有成功:

transform: translateZ(0px);
transform-style: flat;
transform: translate3d(0,0,0);

以下是一些类似/相关的问题。但是经过数小时的搜索，我没有找到任何解决方案(是的，我尝试了我找到的所有答案):

Prevent Safari cuts with transform

Safari Rendering Issues on Rotated Elements

CSS transition transform z-index conflict in Safari (Works on Chrome / FF)

CSS Translate Issue on Safari

CSS transform causing div to overlap in Safari?

Bug in CSS3 rotateY transition on Safari?

Why does Safari treats transform translate different when compared to chrome?

Why on Safari the transform translate doesn't work correctly?

Safari CSS Transition flickering

CSS TranslateY Animation on Safari

相关错误？

https://bugs.webkit.org/show_bug.cgi?id=188656

https://bugs.webkit.org/show_bug.cgi?id=61824

https://bugs.webkit.org/show_bug.cgi?id=54766

https://bugs.webkit.org/show_bug.cgi?id=88587

我的代码基于此博客:
https://codemyui.com/spiral-banner-text-animation-using-pure-css/

这是代码(与此处相同 Codepen)
html:

<ul>
  <li>
    <img src="https://picsum.photos/200?random=1" />
  </li>
  <li>
    <img src="https://picsum.photos/200?random=2" />
  </li>
  <li>
    <img src="https://picsum.photos/200?random=3" />
  </li>
  <li>
    <img src="https://picsum.photos/200?random=4" />
  </li>
  <li>
    <img src="https://picsum.photos/200?random=5" />
  </li>
  <li>
    <img src="https://picsum.photos/200?random=6" />
  </li>
  <li>
    <img src="https://picsum.photos/200?random=7" />
  </li>
  <li>
    <img src="https://picsum.photos/200?random=8" />
  </li>
  <li>
    <img src="https://picsum.photos/200?random=9" />
  </li>
  <li>
    <img src="https://picsum.photos/200?random=10" />
  </li>
</ul>

手写笔(CSS):

$lines = 10;
$duration = 4;

ul {
  perspective: 900px;
  list-style: none;
  height: 100vh;
  max-height: 800px;
  min-height: 400px;
  text-align: center;
}

li {
  position: absolute;
  top: 0;
  width: 100%;
  animation-duration: ($duration * $lines) s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: spiral-staircase;
  opacity: 0;
}

for $i in 0 .. $lines {
  li:nth-child({$i}) {
    animation-delay: (($duration * $i)) - $duration s;
  }
}

for $r in 0 .. ($lines / 2) {
  li:nth-child({$r}) {
    right: ($r / 2) rem;
  }

  li:nth-last-child({$r}) {
    right: ($r / 2) rem;
  }
}

@keyframes spiral-staircase {
  0% {
    transform: translateY(40vh) rotateY(-90deg);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  50% {
    transform: translateY(0vh) rotateY(90deg);
    opacity: 0;
  }

  100% {
    transform: translateY(0vh) rotateY(90deg);
    opacity: 0;
  }
}

这似乎是 Safari 中的一个错误。但是你们有解决方法吗？ 我将非常感谢任何帮助!
谢谢!
编辑:
如果您可以重现该问题(您应该可以使用提供的 Codepen 进行操作 - 只需在 Chrome 中打开 Codepen 一次，在 Safari 中打开一次)并且您没有解决方案或答案，我将不胜感激对该问题的投票(所以更多的人可以看到它)。因为这个问题的问题是:它很具体，我想只有少数人能回答。因此，更多的赞成让这个问题得到更多的关注 - 希望是一个解决方案。

Answer 1

解决缺少 z-index 支持的方法是通过在 z 轴上移动平面来避免它们相交。
由于我们正在为 transform 属性设置动画并且我们需要该属性来进行 z 轴位移，因此我们可以将动画更改为 img元素而不是 li元素，并在 li 上做位移.
这是一个工作示例:
https://codepen.io/ptcc/pen/qBqyqEj?editors=0100
变化基本上是这些:
从 ul 移动视 Angular 每个li

li {
    perspective: 900px;

将动画移动到 img并在 li 上设置 translateZ根据指数。

for $i in 0 .. $lines {
  li:nth-child({$i}) {
      transform: translateZ($i*100px);
  img{
      animation-delay: (($duration * $i)) - $duration s;
    }
  }
}