仅在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（Safari）：

图片和按钮位于叠加层后面

iOS（Chrome）：

图片和按钮位于叠加层后面

桌面（Chrome）：

按预期工作

Android（Chrome）：

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

Answer 1

我有一个解决方案。它很糟糕，而且更像是黑客攻击，但它确实运行良好。

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

结果：