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.

[gsnedders]

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

I don't think anyone currently is trying to tackle automated testing in web views or other embedded browsers (like Android's Custom Tabs or iOS's SFSafariViewController), for what it's worth, which makes those problems harder.

Even in general, while I think existing browsers with dynamic viewport sizing all hide/show UI elements on scroll, how much you have to scroll probably depends between browsers (and quite possibly how you scroll — I wouldn't be particularly surprised if some browser required a user scroll (v. from JS, or loading a fragment) to hide UI elements). I suspect that testing this in an automated way cross browser may be somewhat difficult?

[johannesodland]

@bramus Firefox-ios closed their issue, so I opened a new one here: https://github.com/mozilla-mobile/firefox-ios/issues/22607