CSS 变换的 Safari 渲染错误 - 深度排序/z-index 问题？（在 Chrome 工作）

Question

对于我的网站，我使用了这个螺旋动画： Codepen

这是 Chrome 中的样子（应该是这样）：

这是它在 Safari 中的样子：

css 变换在 Google Chrome 中看起来很棒，但在 Safari 中它会损坏。

我尝试了以下方法（如其他 forums/threads 中所述），但没有成功：

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

这里有一些 similar/related 问题。但是经过几个小时的搜索我还没有找到任何解决方案（是的，我尝试了我找到的所有答案）：

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?
Safari CSS Transition flickering
CSS TranslateY Animation on Safari

相关错误？

我的代码基于这个博客： 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 轴上移动平面来避免平面相交。

因为我们正在动画变换属性并且我们需要属性来进行 z 轴位移，我们可以将动画更改为 img 元素而不是 li 元素，并在 li.

上做位移

这是一个工作示例： https://codepen.io/ptcc/pen/qBqyqEj?editors=0100

变化基本上是这些：

将视角从 ul 移动到每个 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;
    }
  }
}

CSS 变换的 Safari 渲染错误 - 深度排序/z-index 问题？（在 Chrome 工作）

Safari rendering bug with CSS transform - a depth sorting / z-index problem? (works in Chrome)

css

safari

transform

z-index

CSS 变换的 Safari 渲染错误 - 深度排序/z-index 问题？ （在 Chrome 工作）

Safari rendering bug with CSS transform - a depth sorting / z-index problem? (works in Chrome)

css

safari

transform

z-index

CSS 变换的 Safari 渲染错误 - 深度排序/z-index 问题？（在 Chrome 工作）