interop icon indicating copy to clipboard operation
interop copied to clipboard

Viewport meta element: `interactive-widget` property

Open BenjaminAster opened this issue 5 months ago • 0 comments

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

BenjaminAster avatar Sep 17 '24 19:09 BenjaminAster