仅在 iOS（Safari 和 Chrome）上的 z-index 不起作用（内容出现在后面）

Question

我有一个浮动图像查看器。在桌面浏览器和 Android 浏览器上，这按预期工作，叠加层覆盖整个屏幕并位于正常内容之上，而图像和关闭按钮显示在其之上，但在 iOS浏览器（Safari 和 Chrome），内容显示在其他内容后面，不符合 z-index。

我已经尝试了所有我能想到的方法，但没有希望。你能解释一下为什么仅在 iOS 上发生这种情况吗？我该如何解决？

这是我的代码：

/* Sass: */
/*
.photo-preview {
 top: 0;
 left: 0;
 z-index: 11;
 height: 100vh;
 position: fixed;

 .btn-close-photo-preview {
  right: 0;
  top: 0;
  position: absolute;
  pointer-events: auto;

  .inner-btn-close-photo-preview {
   margin: 2.5vw;
   position: relative;
   z-index: 2;
   font-size: 6vw;
   color: #fff;
   background: rgba(0, 0, 0, 0.4);
   -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      -khtml-border-radius: 50%;
   height: 8vw;
   width: 8vw;
   text-align: center;
  }
 }

 img {
  height: auto;
  width: 100vw;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
    background-color: #000;
}
*/
/* Compiled CSS: */
.photo-preview {
  top: 0;
  left: 0;
  z-index: 11;
  height: 100vh;
  position: fixed;
}
.photo-preview .btn-close-photo-preview {
  right: 0;
  top: 0;
  position: absolute;
  pointer-events: auto;
}
.photo-preview .btn-close-photo-preview .inner-btn-close-photo-preview {
  margin: 2.5vw;
  position: relative;
  z-index: 2;
  font-size: 6vw;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  height: 8vw;
  width: 8vw;
  text-align: center;
}
.photo-preview img {
  height: auto;
  width: 100vw;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.overlay {
      display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
  background-color: #000;
}

<main>
  <div class="photo-preview">
    <div class="btn-close-photo-preview">
      <div class="inner-btn-close-photo-preview">
        <i class="fal fa-times photo-preview-svg"></i>
      </div>
    </div>
    <img src="https://i.imgur.com/ruluJhL.jpg">
  </div>
</main>
<div class="overlay" id="overlay"></div>

我希望看到的：

我所看到的：

iOS（野生动物园）：

图像和按钮在叠加层后面

iOS (Chrome):

图像和按钮在叠加层后面

桌面（Chrome）：

按预期工作

Android (Chrome):

没有屏幕截图，但它按预期工作（没有问题）

Answer 1

我有办法。它很蹩脚，更像是一个 hack，但它确实工作得很好。

if (isIosSafari()) {
   $(this).parent().css({"position": "fixed", "z-index": "11"});
   $(this).siblings().hide();
}

仅在 iOS（Safari 和 Chrome）上的 z-index 不起作用（内容出现在后面）

z-index only on iOS (Safari and Chrome) is not working (content appearing behind)

html

css

z-index

mobile-safari