Мягкая клавиатура iOS увеличивает фиксированный DIV вместо динамической регулировки высоты ⇐ IOS

[Anonymous]

Я работаю над адаптивным приложением, используя React и Tailwind CSS. Раскладка работает должным образом в настольных браузерах, но в iOS возникает проблема при открытии виртуальной клавиатуры.
Когда открывается виртуальная клавиатура:

• Div (фиксированный элемент) сдвигается вверх, скрывая заголовок и верхнюю часть окна чата.
• окно чата становится выше видимого окна просмотра, что приводит к вертикальной прокрутке (что нежелательно).
• Я хочу, чтобы размер окна чата динамически изменялся в соответствии с доступным пространством и не прокручивался.

Шаги, чтобы воссоздать его:[*] strong>

Откройте приложение на устройстве iOS или в эмуляторе Safari.
[*]Измените размер окна до ширины менее 480 пикселей. (в этой точке останова чат разворачивается в полноэкранном режиме).
[*]Сосредоточьтесь на вводе текста, чтобы открыть клавиатуру.
[*]Заголовок убирается из поля зрения, а окно чата становится прокручиваемым.
< /ол>

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

export const ChatWindow = () => {
return (
className={`
fixed
flex
flex-col
z-50
bg-white
text-white
overflow-hidden

right-[24px]
bottom-[24px]

w-[400px]
min-h-[112px]
h-[calc(100dvh-48px)]
max-h-[747px]

max-[768px]:bottom-[65px]
max-[768px]:h-[calc(100dvh-89px)]

max-[480px]:top-0
max-[480px]:right-0
max-[480px]:bottom-0
max-[480px]:left-0
max-[480px]:w-auto
max-[480px]:h-[calc(100dvh-env(safe-area-inset-bottom))]
max-[480px]:max-h-none
max-[480px]:rounded-none
`}
>




);
};

Что я пробовал[/b]
Динамическая высота области просмотра (dvh): я использовал dvh для вычислений высоты (например, h-[calc(100dvh- 48px)]), но, похоже, он не обновляется правильно при появлении клавиатуры.
Пользовательский JavaScript: динамически вычислял высоту с помощью window.innerHeight и применял ее как переменную CSS (--vh), но это не устранило проблему.
Переключение на абсолютное позиционирование ниже 480 пикселей: настройка позиционирования для маленьких экранов не помешала клавиатуре мешать макету.
Предотвращение прокрутки основного текста: я добавил переполнение: скрыто в тело, но это привело к несвязанным проблемам с макетом.
Ожидается:
Когда открывается виртуальная клавиатура, размер элемента div должен динамически изменяться в соответствии с доступным пространством. без толчка вверх.
Заголовок всегда должен оставаться видимым.
Не должно быть ненужной вертикальной прокрутки.

Подробнее здесь: https://stackoverflow.com/questions/792 ... ing-height