z-index 和 translate 3d 在 chrome 和 safari 中的工作方式不同

Question

我遇到浏览器兼容问题，发现它是由 Google chrome 和 Safari 处理 z-index 并以不同方式转换 3D 引起的。我在这里做一个最小的例子：

<div>
  <div style="background-color: blue; height: 100px; width: 100px; position: absolute; transform: translate3d(10px, 10px, 10px)"></div>
  <div style="background-color: red; height: 100px; width: 100px; position: relative; z-index: 1"></div>
</div>

这个简短的 html，在 Safari 和 Google Chrome 中显示不同。

我可以知道哪个是期望的行为吗？我应该如何正确地同时使用 z-index 和 transform？

我尝试了不同的浏览器并做了一个最小的例子。

Answer 1

Safari 也将 translate3d 属性作为浏览器中的一个图层工作，并且它具有这种不同的显示方法，因此如果您将元素与 z-index 和其他元素与 translateZ，translateZ 或 translate3d 将在 z-index 元素上工作

所以，为了避免 safari 出现问题，我建议您使用 translateY 和 translateX 方法，如下面的评论所示

这里有更多关于 Safari 的信息：https://bugs.webkit.org/show_bug.cgi?id=61824

例子：

.box {
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
  position: absolute;
  /** this works in safari **/
  transform: translateY(10px) translateX(10px);

  transform: translate3d(10px, 10px, 10px);
}

.red {
  background-color: red;
  position: absolute;
  
  /** this desn't work in safari */
  /** transform: translate3d(0, 0, 9px); */
  
  /** need this to work with safari */
  /** transform: translate3d(0, 0, 11px); */

  z-index: 1;
}

<div>
  <div class="box blue"></div>
  <div class="box red"></div>
</div>