javascript – Is there any repair to iOS, safari and chrome mounted place for when keyboard reveals up?

I am attempting to place a fixed-bottom div that stays on backside and will get above the digital keyboard when the enter area is concentrated. On Android, it really works completely, however on iOS (safari and chrome) it would not appear to work in any respect.
I attempted this answer from mozilla internet dev: verify second instance
however that is the behaviour I am getting on ios:

at first

** after scroll and refocus enter: **

Evidently on iOS the resize occasion is just not triggered by the keyboard?

that is the code I am utilizing on React:

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

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

    // Operate to replace the underside bar place
    operate updateBottomBarPosition() {
      const viewport = window.visualViewport
      const visualViewport = window.visualViewport
      const offsetLeft = visualViewport.offsetLeft
      const offsetTop =
        visualViewport.top -
        layoutViewport.getBoundingClientRect().top +
        visualViewport.offsetTop

      // You might additionally do that by setting type.left and magnificence.prime for those who
      // use width: 100% as an alternative.
      console.log(offsetLeft)
      setBottomPos(offsetTop)
      bottomBar.type.remodel = `translate(${offsetLeft}px, ${offsetTop}px) scale(${
        1 / viewport.scale
      })`
    }

    // Connect the replace operate to each scroll and resize occasions
    window.visualViewport.addEventListener('scroll', updateBottomBarPosition)

    // Connect the replace operate to the resize occasion of the window
    window.addEventListener('resize', updateBottomBarPosition)

    // Preliminary positioning
    updateBottomBarPosition()

    // Clear up occasion listeners when the element unmounts
    return () => {
      window.visualViewport.removeEventListener(
        'scroll',
        updateBottomBarPosition,
      )
      window.removeEventListener('resize', updateBottomBarPosition)
    }
  }, []) // Empty dependency array ensures the impact runs as soon as when mounted

  console.log(bottompos)

  return (
    <div>
      <div id="bottombar" type={{ place: 'mounted' }}>
        <div> some backside content material right here </div>
      </div>

      <div id="layoutViewport">
        <enter kind="textarea"></enter>
      </div>
    </div>
  )
}

export default CustomModal

which is mainly the identical code as the instance from mozilla dev.

stackblitz right here

The query is, is there an answer for this? This has been bugging me out for some time now, and I can not seem to determine the answer to this