interop
interop copied to clipboard
Viewport meta element: `interactive-widget` property
Description
WebKit currently does not implement the interactive-widget
property for the viewport <meta>
element, meaning that there is no way to opt-in to layout viewport resizing when a virtual keyboard is shown. Layout viewport resizing being disabled means that the virtual keyboard is simply drawn on top of the site and has the negative effect that toolbars on the bottom of the page, or even ones at the top of the page if the input element is at the bottom, are simply not shown when the virtual keyboard is active. Instead, the site becomes scrollable, even if the <body>
has a height of 100dvh
.
Chromium browsers on Android have, for compatibility with iOS, changed their behavior to align with WebKit about two years ago, while also implementing the interactive-widget
viewport meta property that lets developers opt-in to the old behavior which actually resizes the page when a virtual keyboard is shown, which is preferable in almost all situations.
Firefox on Android has just implemented interactive-widget
and will also change their behavior to default to WebKit's behavior, effectively matching Chromium's behavior exactly.
So once Firefox' new implementation has shipped, WebKit will be the only one left where making the layout viewport resizable via interactive-widget
is not supported.
Specification
https://drafts.csswg.org/css-viewport-1/#interactive-widget-section
Additional Signals
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=259770