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

Question

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

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

这就是它在 Safari 中的样子：

css 转换在谷歌浏览器中看起来很棒，但在 Safari 中它坏了。

我尝试了以下（如其他论坛/线程中所述），但没有成功：

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

---

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

• 通过变换防止 Safari 剪切
• 旋转元素上的 Safari 渲染问题
• Safari 中的 CSS 转换变换 z-index 冲突（适用于 Chrome / FF）
• Safari 上的 CSS 翻译问题
• CSS 转换导致 div 在 Safari 中重叠？
• Safari 上 CSS3 rotateY 过渡中的错误？
• 与 chrome 相比，为什么 Safari 对待转换的翻译不同？
• 为什么在 Safari 上转换翻译不能正常工作？
• Safari CSS 过渡闪烁
• Safari 上的 CSS TranslateY 动画

相关错误？

• 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 索引支持的方法是通过在 z 轴上移动平面来避免平面相交。

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

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

变化基本上如下：

将视角从 移动ul到每个li

li {
    perspective: 900px;

将动画移动到并根据索引img设置 translateZ 。li

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