z-index только на iOS (Safari и Chrome) не работает (контент появляется сзади) - PullRequest
Новая
       22

z-index только на iOS (Safari и Chrome) не работает (контент появляется сзади)

0 голосов
/ 17 мая 2018

У меня есть плавающая программа просмотра изображений.В настольных браузерах и 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>

Что я ожидаю увидеть:

iPhone 6_7_8 Plus

Что я вижу:

iOS (Safari):

Изображение и кнопка находятся за наложением safari

iOS (Chrome):

Изображениеи кнопка находятся за оверлеем Chrome

Рабочий стол (Chrome):

Работает, как и ожидалось Desktop chrome

Android(Chrome):

Нет скриншота, но работает как положено (без проблем)

1 Ответ

0 голосов
/ 18 мая 2018

У меня есть решение. Это дерьмо, и это скорее хак, но это работает достаточно хорошо. 

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

И результат:

result

...