Пустое пространство вне HTML в мобильном Safari, когда клавиатура открыта ⇐ CSS

[Anonymous]

У меня есть очень странная ошибка в моей библиотеке JavaScript в мобильном Safari, которую я попытался воспроизвести на простом примере:
У меня есть базовые CSS и HTML:

Код: Выделить всё

html,
body {
margin: 0;
padding: 0;
font-family: monospace;
}
body {
min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
#term {
background: black;
color: #ccc;
height: 100%;
}
h1 {
margin: 0;
font-weight: normal;
}

html:

Код: Выделить всё

    ...




HELLO Mobile
...

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


Кто-нибудь знает, как решить эту проблему? Выглядит как обычная страница.
Вот ссылка на сайт: https://terminal.jcubic.pl/mobile.html
Как видно из кода, я попытался исправить проблему, добавив:

Код: Выделить всё

-webkit-fill-available

Найдено в статье Криса Койера: Исправление CSS для 100vh в мобильном WebKit. Но это не приводит к каким-либо изменениям.
Есть ли способ избавиться от этого пробела? Кажется, даже у CodePen есть эта проблема. Это ошибка в Mobile Safari, есть ли способ ее исправить?
РЕДАКТИРОВАТЬ:
Я думаю, что это давняя проблема, и Apple не волнует, насколько несчастны пользователи и разработчики. Safari на iOS прокручивается за пределы элемента при открытии виртуальной клавиатуры

Подробнее здесь: https://stackoverflow.com/questions/705 ... rd-is-open