Question

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

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

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都相同。

Answer 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>

iOS和Safari macOS中的z-index颠倒了

1 个答案: