So here’s how it looks on chrome emulator,

BEFORE INPUT SCREENSHOT :

AFTER INPUT SCREENSHOT :

And here’s how it looks on native ios

BEFORE INPUT SCREENSHOT :

AFTER INPUT SCREENSHOT :

AFTER HIDING TOOLBAR/ADDRESSBAR SCREENSHOT : (Everythuing is normal now)

As u can see there’s this weird blank div from half of the screen for some reasons, but it foes away when i switch to hidden toolbar view. How can I fix it in ios?

Here’s my ui heirarcy for the page,

 return (
        <div className="flex flex-col h-screen justify-start overflow-hidden">
            <Header id="header" />
            <div style={{ height: availableHeight }} className="flex w-full" >
            {sessionId && uid ? <MessageList sessionId={sessionId} uid={uid} /> : <div className="flex items-center justify-center flex-grow"><h1>Welcome. . .</h1></div>}
            </div>
            <MessageField id="messageField" sessionId={sessionId} uid={uid} />
        </div>
    );