I have a self-contained JavaScript chat widget that opens as a full-screen overlay on mobile. When the user taps the input field to type, the keyboard opens and the chat messages scroll out of view the user can to read the conversation while typing. Current setup: - On mobile the chat card is position:fixed; top:0; left:0; right:0; bottom:0; height:100% - The input row is position:fixed; bottom:0; left:0; right:0 - The messages area is flex:1 1 auto; overflow-y:auto; padding-bottom:80px - I am using window.visualViewport resize event to detect keyboard and adjust layout - Font size on input is 16px (so no iOS auto-zoom) The problem: On iOS Safari specifically, when the keyboard opens the messages scroll up and out of view. The user can no longer see what was said. I need the messages to stay visible and scrolled to the bottom above the keyboard, with the input always pinned above the keyboard. What I have tried: 1. visualViewport resize listener setting chatCard.style.height = vvp.height + 'px' and chatCard.style.top = vvp.offsetTop + 'px' 2. Multiple setTimeout delays (100ms, 300ms, 600ms) to scroll messages after keyboard settles 3. position:fixed on input row with env(safe-area-inset-bottom) 4. height:100dvh on the chat card 5. Scrolling messages to bottom on input focus event None of these reliably keep messages visible above the keyboard on iOS Safari. Question: What is the reliable way to keep chat messages visible and scrolled correctly when the mobile keyboard opens, with the input pinned above the keyboard similar to how WhatsApp or iMessage behaves on iOS? Any working code example would be greatly appreciated.