Ошибка видового экрана Safari, проблемы с фиксированным положением и снизу или сверху

Question

Я испытываю что-то странное в iOS 12.3.1 Safari. Эта проблема относится как минимум к iOS 12.2, , но я думаю, что это было проблемой гораздо дольше.

Эта проблема проявляется при попытке выровнять элемент по нижней оси окна просмотра и является проблемой как в портретном, так и в ландшафтном режиме.

Чтобы воспроизвести проблему, элемент должен иметь position из fixed или absolute, однако не имеет значения, располагаете ли вы элемент с помощью top и transform или bottom .

Портретный режим

Проблема проявляется только в портретном режиме , если Safari отображает сокращенную строку URL-адреса, , которая заменяет обычные URL-адреса и строки меню, и вертикального переполнения нет.

Обычные строки URL и меню // Сжатая строка URL

Примечательно, что сжатая строка меню отображается только в случае вертикального переполнения, когда браузер прокручивается вниз или когда ориентация браузера была изменена с книжного на ландшафтный, а затем обратно (несмотря на то, существует или нет вертикальное переполнение). ).

Изменение ориентации с вертикальным переполнением // Без переполнения

Я не совсем уверен, что здесь происходит.

Пейзажный режим

Проблема с альбомным режимом всегда и возникает только тогда, когда в верхней части страницы отображается обычная панель навигации. Панель навигации скрыта только в ландшафтном режиме из-за прокрутки вниз или изменения ориентации с книжного на альбомный.

с вертикальным переливом

Без вертикального переполнения

Интересно то, что высота панели навигации в альбомном режиме явно смещает область просмотра, поэтому позиция bottom: 0 или top: 100% перемещается за пределы области просмотра, когда отображается панель навигации.

Дрянной обходной путь для портретного режима

Это супер обходной обходной путь, и это дурацкий обходной путь, но пока это единственное, что заставляет position: fixed; bottom: 0; фактически позиционировать элемент в нижней части области просмотра после переключения ориентации, если нет переполнения.

<div style='height: 0'>
  <!-- the quantity of <br> elements must create vertical overflow -->
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <!-- this does not work without the space character -->
  &nbsp;
</div>

Однако я только что заметил, что это создает невидимое вертикальное переполнение и, следовательно, ненужную вертикальную прокрутку, по крайней мере, в Safari и Chrome. Я также обеспокоен тем, что это может вызвать другие проблемы на других устройствах в другом браузере, которые я не могу проверить.

---

Абсолютно отстой, что из-за этой ошибки веб-сайт иногда выглядит как дерьмо для удобства пользователей.

Кто-нибудь знает, что происходит?

Кто-нибудь знает какие-либо обходные пути?

Кто-нибудь знает о реальном решении?

Answer 1

Привет, этот вопрос мне сначала понравился, и я вспомнил свои дни, часами копаясь в HTML и CSS, пытаясь все сделать правильно. Увы, все эти часы промахов были для этого момента.

vh раньше рассчитывалось текущим окном просмотра вашего браузера. Если вы загрузили сайт в браузер, значение 1vh будет равно 1% от высоты вашего экрана, а затем минус интерфейс браузера.

Но! Если вы хотите прокрутить, это становится сложно. После того, как вы пройдете мимо интерфейса браузера (в данном случае, вашей адресной строки), вы получите странный скачок в вашем контенте, потому что vh будет обновлено.

Safari для iOS был одним из первых, кто внедрил исправление. Они устанавливают фиксированное значение vh в зависимости от максимальной высоты экрана. Тогда пользователь не будет испытывать скачок в содержании, но .... да, всегда есть но ...

Наличие фиксированного значения - это круто, кроме случаев, когда вы хотите иметь полноразмерный элемент или элемент с фиксированным положением внизу экрана , потому что тогда оно будет обрезано!

В этом твоя проблема ... и попрощайся с ней, потому что ...

Это ваше решение !!

CSS:

.my-element {
  height: 100vh; /* This is for browsers that don't support custom properties */
  height: calc(var(--vh, 1vh) * 100);
}

ЯШ:

// Get the viewport height and multiply it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then set the custom --vh value to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

Теперь вы можете использовать --vh в качестве значения вашей высоты, как и любую другую vh-единицу, умножьте ее на 100, и у вас будет полная высота, которую мы хотим.

Осталось одно: js там работает, но мы никогда не обновляем размер элемента при изменении области просмотра, так что это не будет работать, вам нужен слушатель ...

больше js:

// We listen to the resize event
window.addEventListener('resize', () => {
  // Update the element's size
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

Ура!