Есть ли какое-либо исправление фиксированного положения iOS, Safari и Chrome при появлении клавиатуры? ⇐ IOS

[Anonymous]

Я пытаюсь разместить элемент div с фиксированной нижней частью, который остается внизу и поднимается над виртуальной клавиатурой, когда поле ввода находится в фокусе. На Android работает отлично, а на iOS (сафари и хром) вообще не работает. Я попробовал это решение от веб-разработчика Mozilla: проверьте второй пример. но вот такое поведение я наблюдаю на iOS:

сначала





** после прокрутки и изменения фокуса ввода: **





Похоже, что в iOS событие изменения размера не запускается клавиатурой?

это код, который я использую в React:

import React, { useState, useEffect } из 'react' функция CustomModal() { const [bottompos, setBottomPos] = useState('0') useEffect(() => { const BottomBar = document.getElementById('bottombar') const layoutViewport = document.getElementById('layoutViewport') // Функция для обновления позиции нижнего бара функция updateBottomBarPosition() { const область просмотра = window.visualViewport const VisualViewport = window.visualViewport const offsetLeft = VisualViewport.offsetLeft константное смещениеTop = визуальныйViewport.height - макетViewport.getBoundingClientRect().height + VisualViewport.offsetTop // Вы также можете сделать это, установив style.left и style.top, если хотите // вместо этого используйте ширину: 100%. console.log(offsetLeft) setBottomPos(offsetTop) BottomBar.style.transform = `translate(${offsetLeft}px, ${offsetTop}px) Scale(${ 1/viewport.scale })` } // Прикрепляем функцию обновления к событиям прокрутки и изменения размера window.visualViewport.addEventListener('прокрутка', updateBottomBarPosition) // Прикрепляем функцию обновления к событию изменения размера окна window.addEventListener('resize', updateBottomBarPosition) // Начальное позиционирование updateBottomBarPosition() // Очищаем прослушиватели событий при размонтировании компонента возврат () => { window.visualViewport.removeEventListener( 'прокрутить', обновлениеBottomBarPosition, ) window.removeEventListener('resize', updateBottomBarPosition) } }, []) // Пустой массив зависимостей гарантирует, что эффект запускается один раз при монтировании console.log(bottompos) возвращаться ( здесь немного нижнего контента ) } экспортировать CustomModal по умолчанию Это по сути тот же код, что и в примере от Mozilla dev.

стекблиц здесь

Вопрос в том, есть ли решение этой проблемы? Меня это уже давно беспокоит, и я не могу найти решение этой проблемы.