z-индекс полностью изменен в iOS и Safari macOS - PullRequest
Новая
       27

z-индекс полностью изменен в iOS и Safari macOS

0 голосов
/ 28 мая 2019

Z-индекс этих изображений установлен таким образом, что они должны быть разбиты на синий, красный, зеленый, но в браузерах iOS и Safari на macOS порядок обратный, поэтому они отображают зеленый, красный, синий.

Здесьявляется CodePen, эта проблема влияет на все браузеры iOS и Safari на 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;
      }
   }
}

Я бы хотел, чтобы z-index был одинаковым во всех браузерах.

1 Ответ

0 голосов
/ 29 мая 2019

Вот вы: 

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