IOS Safari переопределяет 100vh при фокусе ввода: добавление пустого пространства под DOM ⇐ CSS

[Anonymous]

Когда в iOS Safari выбрано поле ввода, за пределами DOM под HTML-тегом вводится около ≈150 пикселей.


Я потратил некоторое время на возню с различными значениями высоты (в моем случае предпочтительнее SVH) и настройками стиля переполнения, используя JS и CSS, но ничего из этого не оказало никакого влияния, поскольку пространство, добавленное на веб-страницу, кажется независима от DOM и недоступна через консоль.
В частности, я экспериментировал с расчетом фактической высоты области просмотра при загрузке страницы, а затем использовал это фиксированное значение на протяжении всего времени существования страницы - применив это фиксированное значение к элементу body/html, чтобы гарантировать, что при отображении клавиатуры внизу не будет добавлено дополнительное пространство.

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

CSS

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

body {
--vh: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
overflow: auto;
}

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

JS

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

useEffect(() => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});

return () => {
window.removeEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
};
}, []);

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

[*]Code Sandbox (Код)
Песочница кода (демо)
[*]Запись экрана
Еще одна (неразрешенная) ветка SO, обсуждающая ту же проблему


Подробнее здесь: https://stackoverflow.com/questions/763 ... ow-the-dom