Экранная клавиатура в Safari и Chrome выходит за фиксированный нижний лист ввода ⇐ CSS

[Гость]

У меня на портале положение: исправлено; внизу: 0; вверху: начальный; правильно: 0; слева: 0; элемент нижнего листа который выглядит как действие по клику. У которого есть поле ввода для ввода данных для входа в систему.

При нажатии на него происходит фокусировка, и в Safari и Chrome появляется программная клавиатура по умолчанию, как и ожидалось.

В некоторых случаях клавиатура поднимается, а фиксированный нижний лист ввода перемещается вверх вместе с клавиатурой, но в некоторых случаях клавиатура выходит за нижний лист ввода, полностью скрывая его.

Я попробовал несколько вещей:
[*]я сохранил user-scalable="no" в метаданных области просмотра. [*]Я добавил margin-bottom: Calc( 20px + env(keyboard-inset-height));, но это не поддерживается в Safari, но и не работает в Chrome. [*]я добавил window.visualViewport.addEventListener('resize', resizeFunction); в эту функцию я добавил
(initialVisualViewPortHeight - FinalVisualViewPortHeight); // эта высота как видимая область просмотра //добавили это как текущее нижнее значение нижнего листа Но в третьем случае несколько раз этот хак работает достаточно хорошо, но в некоторых случаях Safari также выталкивает поле ввода, поднимая его в представление, и из-за этого кода оно также немного перемещается вверх, что добавляет дополнительное пространство в представлении. в целом.

Дайте мне знать, если я что-то упустил. Или мне стоит попробовать что-то еще.