iOS 和 Safari macOS 中的 z-index 反转答案

【问题标题】：z-index reversed in iOS and Safari macOSiOS 和 Safari macOS 中的 z-index 反转
【发布时间】：2019-05-27 22:35:50
【问题描述】：

这些图像的 z-index 已设置，因此它们应该是蓝色、红色、绿色，但在 iOS 浏览器和 macOS 上的 Safari 中，顺序是相反的，因此它们显示绿色、红色、蓝色。

这是一个 CodePen，该问题影响所有 iOS 浏览器和 macOS 上的 Safari。

https://codepen.io/W3-design/pen/pBOJyy

HTML：

<div class="stacked-images">
  <img src="https://via.placeholder.com/320x180/0000FF">
  <img src="https://via.placeholder.com/320x180/FF0000">
  <img src="https://via.placeholder.com/320x180/00FF00">
</div>

SCSS：

.stacked-images {
    min-height: 500px;
    position: relative;
    margin: 20px;

    img {
      position: absolute;
      opacity: 0.9;
      transition: transform .5s ease-in-out;
      transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
      -webkit-transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);

      &:nth-of-type(1) {
        z-index: 100;
        top: 0;
      }

      &:nth-of-type(2) {
        z-index: 90;
        top: 80px;
      }

      &:nth-of-type(3) {
        z-index: 80;
        top: 160px;
      }

      &:hover {
          transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
          -webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
          opacity: 1;
          z-index: 101;
      }
   }
}

我希望 z-index 在所有浏览器中都相同。

【问题讨论】：

@Paulw11，你从哪里得到这个？我读过的所有参考文献都使用“-webkit-transform:”，即使我使用“-webkit-transform:”这一行也没什么区别。
嗯。我在弄乱你的 CodePen 并让它正常工作。我认为这就是我所做的改变，但它现在不起作用......
谢谢@Paulw11，如果你能重复你的改变就太好了，这只是一个美学的东西，但它让我烦恼:)
我在 SO 上发现了一些半副本。并不是说顺序颠倒了，我认为只是Safari忽略了z-index
我已经阅读了一些 safari z-index 问题，但似乎没有一个解决方案适用于我的示例。

标签： ios css macos safari z-index

【解决方案1】：

你在这里：

.stacked-images {
  min-height: 500px;
  position: relative;
  margin: 20px;
}

img {
  position: absolute;
  opacity: 0.9;
  transition: transform .5s ease-in-out;
  transform: translateZ(-1000px) rotate3d(1, 0, 0, 55deg) rotate3d(0, 0, 1, -30deg);
}

img:nth-of-type(1) {
  z-index: 100;
  top: 0;
}

img:nth-of-type(2) {
  z-index: 90;
  top: 80px;
}

img:nth-of-type(3) {
  z-index: 80;
  top: 160px;
}

img:hover {
  transform: rotate3d(0, 0, 0, 0) scale(1.1, 1.1);
  opacity: 1;
  z-index: 101;
}

<div class="stacked-images">
  <img src="https://via.placeholder.com/320x180/0000FF">
  <img src="https://via.placeholder.com/320x180/FF0000">
  <img src="https://via.placeholder.com/320x180/00FF00">
</div>

【讨论】：

谢谢@Kosh，你介意解释一下为什么会这样吗，我必须遗漏一些东西，因为除了嵌套类之外，我拥有的 SCSS 应该会产生与你提供的 CSS 类似的代码。