The Layout Viewport and Viewport-Relative Lengths

[bramus]

Description

This is a partial reprise from this issue from last year, but this time not as an investigation project - something that was already covered in 2022.

The focus of the proposal targets:

• Interoperable Viewport-Percentage Lengths: https://drafts.csswg.org/css-values/#viewport-relative-lengths
• Interoperable behavior of the Layout Viewport’s innerWidth and innerHeight:
  • https://www.w3.org/TR/CSS22/visuren.html#viewport
  • https://drafts.csswg.org/cssom-view/#dom-window-innerwidth
  • https://drafts.csswg.org/cssom-view/#dom-window-innerheight

Right now there is no interop across browsers on mobile, nor in WebViews and IABs.

Specification

(see list above)

Additional Signals

• https://bugs.webkit.org/show_bug.cgi?id=255708
• https://bugs.webkit.org/show_bug.cgi?id=255852
• https://bugs.webkit.org/show_bug.cgi?id=250621
• document.documentElement.clientHeight (and 100vh) changes on address bar hide (page scroll) mozilla-mobile/firefox-ios#8819
• New viewport units don't work on iOS mozilla-mobile/firefox-ios#11574
• https://mastodon.social/@Jespertheend/113164934631426820
• https://front-end.social/@bruno/113171710451870231
• https://bugs.webkit.org/show_bug.cgi?id=174362

[ryantownsend]

@bramus does this cover the Virtual Keyboard? Because that’s a minefield that definitely needs a cross-browser CSS-only solution.

[bramus]

The Virtual Keyboard API is not included in the scope of this proposal.

[jgraham]

Is this proposal already covered by web-platform-tests (assuming that they can be run on mobile)?

[bramus]

There are some basic tests using the units:

• https://wpt.fyi/results/css/css-values/viewport-units-compute.html?label=master&label=experimental&aligned&q=viewport
• https://wpt.fyi/results/css/css-values/viewport-units-parsing.html?label=experimental&label=master&aligned&q=viewport
• https://wpt.fyi/results/css/css-values/viewport-units-writing-mode.html?label=master&label=experimental&aligned&q=viewport

But these tests don’t actually test the changes that would occur on mobile. Some of the demos from https://github.com/web-platform-tests/interop-2022-viewport could form the basis for new tests.