Interop 2022 Viewport Investigation Effort Demo Pages

A collection of demos that allow you to debug and test the behavior of certain viewport and viewport-related aspects.

These demos are part of the Viewport Investigation Effort

Individual Viewports and related aspects

1. Initial Containing Block (ICB)
   • With viewport meta tag (width=device-width)
   • With fixed viewport meta tag (width=1024)
   • Without viewport meta tag
   • With viewport-fit=cover in the viewport meta tag
2. Layout Viewport
3. Visual Viewport
4. Virtual Keyboard API

Viewport Units

1. Viewport Units + window.innerHeight
   (Adapted from https://bokand.github.io/demo/urlbarsize.html)
2. Viewport Units + -webkit-fill-available

Events / All-in-one

• ICB + Fixed Viewport + Visual Viewport

Scrollbar Gutter

• scrollbar-gutter: stable;
  • Short Content
  • Long Content
• scrollbar-gutter: stable both-edges;
  • Short Content
  • Long Content

Safe Inset Areas

1. With viewport meta tag (width=device-width) but no viewport-fit
2. With viewport-fit=auto in the viewport meta tag
3. With viewport-fit=cover in the viewport meta tag
4. With viewport-fit=contain in the viewport meta tag

Legend

• Red dashed line = ICB
• Blue dotted line = Layout Viewport
• Orange slanted line = Visual Viewport