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

I have a floating image viewer. On desktop browsers and Android browsers, this works as expected, the overlay covers the whole screen and is on top of the normal content, while the image and close button display on top of that, but on iOS browsers (Safari and Chrome), the content appears behind other content, it's not respecting the z-index.

I've tried everything I can think of, but no hope. Can you explain why this happens only on iOS, and how I can resolve it?

Here's my code:

/* 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>

What I expect to see:

What I do see:

iOS (Safari):

Image and button are behind overlay

iOS (Chrome):

Image and button are behind overlay

Desktop (Chrome):

Works as expected

Android (Chrome):

No screenshot, but it works as expected (no issues)

Solution

I have a solution. It's crappy, and's more of a hack, but it does work well enough.

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