时间戳

首页 > 解决方案 > CSS transform and z-index bug on hover in macOS Safari and iOS browsers

ios - CSS transform and z-index bug on hover in macOS Safari and iOS browsers

问题描述

Checkout the JSFiddle: https://jsfiddle.net/mavicnz/eph7bmx8/21/

Or CodePen if that's how you roll: https://codepen.io/W3-design/pen/pBOJyy

When I hover over the images on desktop the CSS transition works correctly, it rotates the image and changes the z-index to bring the hovered image to the foreground, the same behaviour doesn't happen when I "hover/tap" each image in iOS in both Safari and Chrome the CSS transition is OK but the z-index is all messed up.

You'll notice when the page loads that the z-index on iOS is not honoured at all and the images are displayed in markup order :(

I would like the iOS "hover/tap" result to be the same as the desktop.

NOTE: I have read some posts about adding translate3d to the img CSS but this doesn't work if you have multiple transforms like I want.

NOTE 2.0: I have used this CSS workaround to target Safari only as that's the browser with the problem. is there a css hack for safari only NOT chrome?

NOTE 3.0: @Kaiido has provided the work around for this issue on iOS and MacOS, it is linked above.

NOTE 4.0: There is still the issue that the z-index is reversed in iOS, so the bottom image displays on top.

This fixes the z-index issue without the other transforms:

-webkit-transform: translate3d(0,0,0);

This doesn't fix the z-index issue:

-webkit-transform: translate3d(0,0,0) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);

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: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
      -webkit-transform: 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;
      }
   }
}

CSS: (For those that need it)

.stacked-images {
  position: relative;
  margin: 20px;
}
.stacked-images img {
  position: absolute;
  opacity: 0.9;
  transition: transform .5s ease-in-out;
  transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);  
  -webkit-transform: rotate3d(1, 0, 0, -55deg) rotate3d(0, 0, 1, -30deg);
}
.stacked-images img:nth-of-type(1) {
  z-index: 100;
  top: 0;
}
.stacked-images img:nth-of-type(2) {
  z-index: 90;
  top: 80px;
}
.stacked-images img:nth-of-type(3) {
  z-index: 80;
  top: 160px;
}
.stacked-images img: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;
}

标签： ioscssz-indexcss-transforms

解决方案

您是否尝试过 Lea Verou 的无前缀？

在 HTML 头部试试这个：

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

推荐阅读