W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2020

Re: [csswg-drafts] [css-viewport] Help me bikeshed "layout viewport" (#4819)

From: David Bokan via GitHub <sysbot+gh@w3.org>
Date: Wed, 19 Aug 2020 15:48:25 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-676507589-1597852104-sysbot+gh@w3.org>
FWIW, when I wrote up a [viewports explainer](https://github.com/bokand/bokand.github.io/blob/master/web_viewports_explainer.md#fixed-viewport-aka-layout-viewport) I also used "fixed viewport" rather than layout.

"Layout viewport" doesn't match the initial containing block size - at least not in Blink. The behavior (I believe this varies between browsers though, at least when I last checked years ago) is that position: fixed elements attach to "the box that is the visual viewport at minimum scale". This ensures:

- The page appears correctly/as it would on desktop when at minimum scale (absent an initial-scale, we load minimally zoomed out)
- Users can always see the full fixed elements by zooming out all the way. 100% size fixed elements will always fill the viewport at this scale.
- The visual viewport is always contained by this outer ("layout"/"fixed") viewport

The latter point in particular makes the scrolling model clearer, the "layout" viewport is a scroller inside the visual viewport scroller.

Given that, consider a case like this:

```
<meta name="viewport" content="width=1000; minimum-scale=2">
<div style="position: fixed; width:100%"></div>
```

In this case, the layout size is 1000px but it'd be a poor choice to make the fixed div 1000px because the user will never be able to see the whole thing in the viewport. Thus the box that contains fixed elements is the minimum-scale box rather than layout.

Note also, (again, maybe Blink specific) the minimum-scale can be affected outside of the viewport meta:

```
<meta name="viewport" content="width=1000">
<div style="width:2000px"></div>
```

The minimum scale in this case will be 0.5 and fixed elements will be pushed out to attach to the larger box. Whether that's the right behavior, I'm not sure.

-- 
GitHub Notification of comment by bokand
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4819#issuecomment-676507589 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 19 August 2020 15:48:27 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:13 UTC