Menu

When the browser doesn't tell you the keyboard is open
πŸ“°

When the browser doesn't tell you the keyboard is open

DEV Community: cssΒ·MaryaΒ·1 day ago
#nWl0rVR5
#devtocss#devto#dev#keyboard#sheet
Reading 0:00
15s threshold

Our bottom sheets worked everywhere we tested: Chrome, Samsung Internet, Firefox, Safari. Then we tried the default browser of a budget Redmi phone: the sign-in sheet sat under the on-screen keyboard, and the password field was invisible.

What was going on

The phone's default browser is a thin shell over Android System WebView. Since Android 15, apps that target SDK 35 are drawn edge-to-edge by default, and adjustResize no longer shrinks the window unless the app handles insets itself. Many small browser shells don't. So when the keyboard opens, the page gets nothing:

no resize on window;

no resize on visualViewport, and its height stays the same;

navigator.virtualKeyboard doesn't exist.

There is nothing to listen to. The keyboard covers the bottom 40% of the screen, and the page has no idea.

The fix: assume the worst after a short wait

If we can't detect the keyboard, we can detect that the browser failed to report it.…

Continue reading β€” create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.