- From: Chris Harrelson via GitHub <sysbot+gh@w3.org>
- Date: Mon, 19 Sep 2022 18:28:31 +0000
- To: public-css-archive@w3.org
chrishtr has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-viewport] Add a meta viewport parameter to control ICB layout behavior for interactive overlays == On many devices, user agents have interactive overlay widgets to assist users when interacting with web pages. The most common is a virtual keyboard, which allows users on touch devices (mobile, tablet and touch-enabled laptops) to type input that is equivalent to that coming from a keyboard. These interactive widgets typically overlap the web page's viewport, and hence there is a question of whether the viewport should resize to account for their presence. Currently, most mobile browsers on Android (Chrome and Firefox in particular) resize the initial containing block (ICB) while the virtual keyboard is open. iOS browsers do not, and instead ovelay the virtual keyboard on top of the scrollable content of the web page without causing a change to layout. Chrome on ChromeOS has the same behavior as iOS. See [here](https://github.com/bramus/viewport-resize-behavior/blob/main/explainer.md) for many more details and a complete analysis of how it all works. There are valid use cases for resizing the ICB (e.g. it provides a convenient way for mobile PWAs to keep informational/actionable bottom-bars or buttons visible on the screen while the virtual keyboard is open), and for not (in many cases, it's undesirable for UX or performance to not affect layout). Developers have also filed CSSWG ([example](https://github.com/w3c/csswg-drafts/issues/7194)) and browser bug issues ([example](https://bugs.chromium.org/p/chromium/issues/detail?id=404315)) requesting both behaviors. I propose we extend the [viewport `<meta>` tag](https://drafts.csswg.org/css-viewport/#viewport-meta) to opt into different behaviors An example syntax would be: `<meta name="viewport" content="width=device-width, initial-scale=1.0, virtual-keyboard=resize-layout">` (`resize-visual` and `overlays-content` would also be options; the former is iOS and ChromeOS, and the latter aligns with behavior of the [virtual keyboard API](https://www.w3.org/TR/virtual-keyboard/)). See [here](https://github.com/bramus/viewport-resize-behavior/blob/main/explainer.md#proposal) for more details. We might want to pick a more general name than `virtual-keyboard` to be forward compatible with other interactive overlays that may be added in the future. I think `resize-visual` should be the default. Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7767 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 19 September 2022 18:28:34 UTC