javascript – iOS keyboard breaks web page structure when opened

I’m utilizing Vite + React + Bootstrap. That is my code:

componentDidMount() {
    this.updateAppHeight();
    if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', this.updateAppHeight);
        window.visualViewport.addEventListener('scroll', this.updateAppHeight);
    } else {
        window.addEventListener('resize', this.updateAppHeight);
    }
}

componentWillUnmount() {
    if (window.visualViewport) {
        window.visualViewport.removeEventListener('resize', this.updateAppHeight);
        window.visualViewport.removeEventListener('scroll', this.updateAppHeight);
    } else {
        window.removeEventListener('resize', this.updateAppHeight);
    }
}

updateAppHeight = () => {
    const top = window.visualViewport
        ? `${window.visualViewport.top}px`
        : `${window.innerHeight}px`;
    doc.documentElement.type.setProperty('--app-height', top);
};

render() {
    return (
        


            

                {this.renderMessages(this.state.messages)}
            

            
 {
                e.preventDefault();
                this.checkAndSend();
            }}>
                

                    ...
                
            
        
    );
}

So there’s a scrollable message half and a enter bar that is fastened on the backside. I used dvh as the peak of this div first, however that solely works on Android. iOS doesn’t correctly replace it when the keyboard opens. So I attempted this repair, utilizing the viewport API to manually resize the div.

Now this works nicely apart from one bizarre problem on iOS I can not wrap my head round. When the keyboard opens, now the window will get moved up by the house the keyboard takes however get’s resized after that leaving the highest of this message half out of the display and the enter bar floating above a white empty house between the keyboard and the enter bar thats precisely the peak of the keyboard.

If I scroll up previous that “white field” every little thing aligns completely and it appears to be like okay. However for some motive iOS forces this web page to maneuver out of body, it doesn’t matter what.

How do I stop this? There should be a extra elegant answer however I couldn’t discover something anyplace.

It is my first query, please be good. Additionally thanks upfront!