Iphone X при переключении окна просмотра из портретного в альбомный режим верхняя часть страницы становится неактивной - PullRequest
Новая
       53

Iphone X при переключении окна просмотра из портретного в альбомный режим верхняя часть страницы становится неактивной

4 голосов
/ 28 января 2020

Проблема со ссылкой вверху страницы на iPhone X становится недоступной для нажатия после поворота от портрета к ландшафту. Находясь в портретном режиме, нажмите «Скрыть панель инструментов», а затем поверните в горизонтальное положение. Используя следующий код, я не могу нажать кнопку «Закрыть». Является ли верхняя часть экрана незащищаемой областью, зарезервированной для адресной строки?

JSFiddle с кодом: https://jsfiddle.net/k673b48n/1/

Я что-то упустил в своем коде? Это ошибка какого-то рода? 

<head>
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

<style>
  .header { position: absolute; right: 5px; }
  .alert-me:before { content: "Close"; position: absolute; top: 2px; left: -47px; }
  .container{ position: absolute; top: 50px; }
</style>

<div class="header">
  <a href="#" onclick="alert('Ahhh General Kenobi')">
    <div class="alert-me">X</div>
  </a>
</div>
<div class="container">
Some lorem ipsum to make the page longer..
</div>

Кажется, это работает нормально:

portrait - works

Закрытие вверху страницы теперь не отвечает:

landscape - not working

Ответы [ 2 ]

2 голосов
/ 23 апреля 2020

Я проверял эту проблему на iPhone 8 и Xs в браузере Safari. Сделал именно то, что вы описали. Находясь в портретном режиме, я нажал «Скрыть панель инструментов», а затем повернул в альбомную ориентацию.

iPhone 8: Первый раз был в точности так, как вы описали, хотя, когда я возвращаюсь в портретный режим - оповещение тоже не сработало. Но! После перезагрузки страницы - я не мог повторить проблему. Все стало работать просто отлично. После скрытия панели инструментов и изменения ориентации - я нажимаю Закрыть , появляется полная панель инструментов и предупреждение работает нормально. Я попробовал другую комбинацию, перезагрузил страницу, приложение, открыл вкладку - работает отлично.

iPhone Xs: Точно так же, как вы описали. Проблема может повторяться каждый раз, когда я перезагрузил страницу. Иногда кнопка Закрыть не реагирует даже после того, как я вернул телефон в портретный режим. Иногда в 3-4 раза после нажатия появляется предупреждение, как и должно быть.

Сводка

  1. Это определенно Safari + iPhone X ( s) ошибка, хотя может быть обнаружена на других моделях iPhone.
  2. Эта проблема не связана с кнопкой Закрыть в верхнем краю экрана, это определенно проблема Окно оповещения . Вы можете использовать несколько советов, как заменить стандартное оповещение .
1 голос
/ 24 апреля 2020

position:absolute удаляет элемент из нормального потока документов. И элемент позиционируется относительно его ближайшего позиционированного элемента, если таковой имеется; иначе, это помещено относительно его начального контейнера. МОЖЕТ на Safari, это не так. Таким образом, вы можете использовать position:relative на <body>, чтобы убедиться, что оно находится внутри <body>. И вы также можете использовать большое число z-index, чтобы расположить заголовок в верхней части контекста стека.

Дополнительная информация:

абсолютная позиция

z-index

укладка- context

Если вам не нужно изменять обычный поток документа, вы можете использовать display:flex; justify-content: flex-end; вместо absolute, чтобы поместить элемент X в самый правый угол. 

.d-flex {
  display:flex;
}
.justify-content-end {
 justify-content: flex-end;
}

.align-items-center {
   align-items: center;
}


.pr-5px {
  padding-right: 5px;
}
<header class="d-flex justify-content-end align-items-center pr-5px">
  <a href="#" onclick="alert('Ahhh General Kenobi')">
    <div class="alert-me">X</div>
  </a>
</header>


<div class="container">
Some lorem ipsum to make the page longer..
</div>
...