z-index reversed in iOS and Safari macOS

Question

The z-index of these images is set so they should be staked blue, red, green but in iOS browsers and Safari on macOS the order is reversed so they display green, red, blue.

Here is a CodePen, the issue effects all iOS browsers and Safari on macOS.

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;
      }
   }
}

I would like the z-index to be the same across all browsers.

Answer 1

Here you are:

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