1

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;
}
Jeff
  • 15
  • 6
  • I'm very intrigued to hear the answer to this question. Also know the on desktop Safari, the layers slice though each other, where in Chrome and Firefox the card rotates and pulls up to the top of the stack. So this may not even be a "mobile" Safari issue, but a Safari issue. – Nate May 13 '19 at 14:32
  • Hi Nate, I haven't found any fix for this issue yet and yes I discovered a couple of days ago that this was also an issue with Safari on macOS as well but on iOS it affects Safari and Chrome because iOS Chrome is built on Safari so suffers from the same issues. I did add a comment above that links to another Stack Overflow post with CSS workarounds to disable the CSS transform for iOS and Safari on macOS, not ideal I know but at least the hover transform still works in all other browsers. – Jeff May 14 '19 at 21:56
  • And here is [fixed fiddle](https://jsfiddle.net/4vetbqdr/) – Kaiido May 24 '19 at 05:45
  • Hi Kaiido, if you post that comment as an answer I’ll mark it as the fix, thanks for your help, it’s crazy but it works. – Jeff May 25 '19 at 06:19
  • I would actually prefer you to accept the duplicate proposal. This way, the ones coming in the future with the same question, but closer to your wordings than the one there, will be able to access that question too, and all answers will be gathered in the same place so that one can judge appropriately which works for them or not. You question having a *deserved* positive score won't get deleted afterward. – Kaiido May 25 '19 at 08:37

1 Answers1

0

Have you tried prefixfree by Lea Verou?

Try this in the HTML head:

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
Rezenalize
  • 59
  • 1
  • 10
  • Thanks, but the issue isn't that I'm missing any of the -o, -moz, -ms, -webkit prefixes, it seems to be an issue with iOS and z-index. – Jeff Apr 23 '19 at 21:16