Interop 2022: Viewport

Work on the viewport investigation project for Interop 2022.

To sort out any confusion about what “viewport” means, and what browsers (especially on mobile devices) should be doing with various viewport measurements & sizing. To make recommendations for what should change to improve interoperability.

• Open any issues at CSSWG, WHATWG, wherever if we find underspecified standards on what these measurements should be in relationship to the viewport — so that the appropriate standards group can take it from there & define any missing details.
• Open any issues/bugs with the appropriate browsers, noting places where they are not aligned with the standard. Or if the standard is unclear, where they are not aligned with each other.

Definitions and Findings

In this effort we are looking at various viewport-related aspects. Their definitions and initial findings are collected in the ./explainers folder:

• Layout Viewport
• Initial Containing Block (ICB)
• Visual Viewport
• Virtual Keyboard
• Virtual Keyboard API
• Viewport Units

Demos

There are a bunch of demos available to visualize, debug, and test the behavior of certain viewport-related aspects in browsers.

These demos are published at https://interop-2022-viewport.netlify.app/ The results of some tests ran against these demos can be reviewed at https://goo.gle/interop-2022-viewport-testresults

Included tests:

• Initial Containing Block (ICB)
• Layout Viewport
• Visual Viewport
• Virtual Keyboard API
• Viewport Units + window.innerHeight
• Viewport Units + -webkit-fill-available (external)
• ICB + Fixed Viewport + Visual Viewport + Event Debugger

The source of the non-external demos is included in this repository’s demos folder.

Recommendations

• TODO