【发布时间】：2019-09-12 04:05:31
【问题描述】：
查看 JSFiddle：https://jsfiddle.net/mavicnz/eph7bmx8/21/
或者 CodePen，如果你是这样滚动的：https://codepen.io/W3-design/pen/pBOJyy
当我将鼠标悬停在桌面上的图像上时，CSS 过渡正常工作，它会旋转图像并更改 z-index 以将悬停的图像带到前台，当我“悬停/点击”时不会发生相同的行为Safari 和 Chrome 中 iOS 中的每个图像 CSS 转换都可以，但 z-index 都搞砸了。
当页面加载时，您会注意到 iOS 上的 z-index 根本不被尊重，并且图像以标记顺序显示:(
我希望 iOS“悬停/点击”结果与桌面相同。
注意：我已经阅读了一些关于将 translate3d 添加到 img CSS 的帖子，但如果您有多个我想要的转换，这将不起作用。
注意 2.0：我使用此 CSS 解决方法仅针对 Safari，因为这是有问题的浏览器。 is there a css hack for safari only NOT chrome?
注意 3.0：@Kaiido 已在 iOS 和 MacOS 上提供了解决此问题的方法，上面已链接。
注意 4.0：iOS 中仍然存在 z-index 反转的问题，因此底部图像显示在顶部。
这修复了 z-index 问题而无需其他转换：
-webkit-transform: translate3d(0,0,0);
这并不能解决 z-index 问题：
-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：（对于那些需要它的人）
.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;
}
【问题讨论】：
-
我很想听到这个问题的答案。还知道在桌面 Safari 上，图层相互切开，在 Chrome 和 Firefox 中，卡片会旋转并拉到堆栈的顶部。所以这甚至可能不是“移动”Safari 问题，而是 Safari 问题。
-
嗨 Nate，我还没有找到任何解决这个问题的方法，是的，我几天前发现这也是 macOS 上的 Safari 的问题，但在 iOS 上它会影响 Safari 和Chrome 因为 iOS Chrome 是在 Safari 上构建的，所以也会遇到同样的问题。我确实在上面添加了一条评论，该评论链接到另一个 Stack Overflow 帖子，其中包含 CSS 解决方法来禁用 macOS 上 iOS 和 Safari 的 CSS 转换，我知道这并不理想，但至少悬停转换在所有其他浏览器中仍然有效。
-
这里是fixed fiddle
-
嗨 Kaiido，如果您将该评论作为答案发布，我会将其标记为修复，感谢您的帮助，这很疯狂，但它确实有效。
-
我实际上希望您接受重复的提案。这样，未来出现同样问题的人，但比那里的人更接近你的措辞，也将能够访问该问题，并且所有答案都将收集在同一个地方，以便人们可以适当地判断哪个是否适合他们。您对获得应得的积极分数的问题不会在之后被删除。
标签： ios css z-index css-transforms