Why CSS dvh ignores the mobile keyboard — and how to fix it

CSS dvh (dynamic viewport height) was introduced to replace the infamous 100vh bug on mobile. It handles the browser URL bar appearing and disappearing — but it completely ignores the on-screen keyboard. When the keyboard opens, position: fixed elements get covered. dvh won't help you here. Why dvh ignores the keyboard The CSS viewport units spec treats the virtual keyboard as an overlay — it doesn't resize the layout viewport. So dvh , svh , and 100vh all stay the same value when the keyboard opens. The real fix: Visual Viewport API keyboardHeight = window . innerHeight - window . visualViewport . height When the keyboard opens, visualViewport.height shrinks while window.innerHeight stays fixed. The difference is the keyboard height. But there's a catch — iOS Safari and Android Chrome behave differently. iOS Safari When the keyboard opens, iOS scrolls the visual viewport upward. visualViewport.offsetTop increases. It fires both resize and scroll events on visualViewport — but window r