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

[Anonymous]

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


** после прокрутки и изменения фокуса ввода: **
< img alt="после небольшой прокрутки и повторной фокусировки ввода" src="" />
Похоже, что в iOS событие изменения размера не запускается с помощью клавиатуры?
это код, который я использую в React:

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

import React, { useState, useEffect } from 'react'

function CustomModal() {
const [bottompos, setBottomPos] = useState('0')
useEffect(() => {
const bottomBar = document.getElementById('bottombar')
const layoutViewport = document.getElementById('layoutViewport')

// Function to update the bottom bar position
function updateBottomBarPosition() {
const viewport = window.visualViewport
const visualViewport = window.visualViewport
const offsetLeft = visualViewport.offsetLeft
const offsetTop =
visualViewport.height -
layoutViewport.getBoundingClientRect().height +
visualViewport.offsetTop

// You could also do this by setting style.left and style.top if you
// use width: 100% instead.
console.log(offsetLeft)
setBottomPos(offsetTop)
bottomBar.style.transform = `translate(${offsetLeft}px, ${offsetTop}px) scale(${
1 / viewport.scale
})`
}

// Attach the update function to both scroll and resize events
window.visualViewport.addEventListener('scroll', updateBottomBarPosition)

// Attach the update function to the resize event of the window
window.addEventListener('resize', updateBottomBarPosition)

// Initial positioning
updateBottomBarPosition()

// Clean up event listeners when the component unmounts
return () => {
window.visualViewport.removeEventListener(
'scroll',
updateBottomBarPosition,
)
window.removeEventListener('resize', updateBottomBarPosition)
}
}, []) // Empty dependency array ensures the effect runs once when mounted

console.log(bottompos)

return (


 some bottom content here





)
}

export default CustomModal

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

Подробнее здесь: https://stackoverflow.com/questions/772 ... board-show