Estoy tratando de hacer que mi aplicación ocupe toda la altura del navegador usando el evento de cambio de tamaño.

Aquí está el código de ejemplo:

 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; `

Funciona como se esperaba en los dispositivos Android, pero comencé a tener problemas en los navegadores iOS.

Cuando el teclado está abierto, aparece un espacio en blanco en la parte inferior de la aplicación y persiste incluso cuando el teclado está cerrado.

Lo mismo ocurre con la barra de direcciones inferior, el evento de cambio de tamaño ni siquiera se activa en tales casos.

Este problema también persiste en el PWA.

¿Hay alguna forma de evitar estos problemas relacionados con la altura en ios?