iOS 和 Safari macOS 中的 z-index 反转

Posted 2023-02-23

【中文标题】iOS 和 Safari macOS 中的 z-index 反转

【英文标题】：z-index reversed in iOS and Safari macOS

【发布时间】：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 问题，但似乎没有一个解决方案适用于我的示例。

【参考方案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 类似的代码。