I am trying to make my app occupy the entire height of the browser using resize event.

Here is the sample code:

import React from 'react'
import { observer } from 'mobx-react'
import { observable } from 'mobx'

import { AppWrapper } from './styledComponents'

@observer
class App extends React.Component {
 @observable availableHeight: number = window.innerHeight

 componentDidMount() {
    window.addEventListener('resize', this.handleResize)
 }

 componentWillUnMount() {
    window.removeEventListener('resize', this.handleResize)
 }

 handleResize = () => {
    this.availableHeight = window.innerHeight
 }

 render() {
    return (
       <AppWrapper height={this.availableHeight}>
          ...
       </AppWrapper>
    )
 }
}

export default App

export const AppWrapper = styled.div`
${tw`min-h-full`}
   height: ${({ height }) => height}px;
`

It's working as expected on Android devices, but I started facing issues in the ios browsers.

When Keypad is open, I am getting some white space at the bottom of App and it persists even when the keypad is closed.

Same with the Bottom Address bar also, the resize event is not even triggered in such cases.

This issue is persisting in the PWA also.

Is there any way to avoid these height-related issues in ios?