[css-scroll-anchoring] [css-scroll-snap] What's the optimal viewing rect on the root scroller?

[emilio]

https://drafts.csswg.org/css-scroll-snap-1/#optimal-viewing-region

Firefox uses the visual viewport. Blink (if my read of their code is correct) uses the layout viewport (I think?).

The spec is unclear. It says "the scrollport".

See https://bugzilla.mozilla.org/show_bug.cgi?id=1585317#c4 for context.

If it should use the visual viewport, then scroll-padding should in theory resolve against that, rather than the layout viewport... right?

cc: @tabatkins @fantasai @bokand @skobes

[bokand]

+@majido

IIRC Blink does use the layout viewport. I don't really see the use case for snapping to the visual viewport and using the layout viewport makes it more intuitive and simpler to reason about for web developers, IMHO.

[bokand]

Erm, never mind my comment above, snapping the visual viewport makes quite a bit of sense.

I think your understanding in Blink is correct and the behavior is a bit inconsistent; Blink uses the layout viewport as the optimal viewing region (at least, scroll-padding and the like is resolved against it) but it scrolls the visual viewport when snapping.

If it should use the visual viewport, then scroll-padding should in theory resolve against that, rather than the layout viewport... right?

I think that'd be more intuitive, yes, but that means that zooming in and out would have to invalidate style, right?

[emilio]

I think that'd be more intuitive, yes, but that means that zooming in and out would have to invalidate style, right?

Percentages are not resolved during styling, only during layout... So it'd have to invalidate layout, I guess.

[theres-waldo]

Note, this came up for us in the context of scroll anchoring, which also uses the "optimal viewing region".

We have scoll anchoring choose an anchor node in the visual viewport, because otherwise content in the visual viewport could actually shift even as we keep a node that's inside the layout viewport (but outside the visual viewport) anchored.

[tabatkins]

I wonder if we want to define the "scrollport" to be the visual viewport when talking about the root scroller, or if it should remain the layout viewport (which I think is what the current definition says) and we should define another term which does use the visual viewport?

[fantasai]

I'd agree that snapping should be resolved against the visual viewport: the whole point is to get the thing in view. However, I suspect scroll-padding should resolve against the layout viewport: a lot of its use cases are around avoiding certain fixed-positioned content, for example, and that resolves against the layout viewport if I'm understanding things correctly.

[fantasai]

Proposal is to clarify that snapping is to the visual viewport, but percentage values resolve against the layout viewport.

[css-meeting-bot]

The CSS Working Group just discussed What's the optimal viewing rect on the root scroller?, and agreed to the following:

• RESOLVED: Use visual viewport for snapping and layout viewport for scroll-padding percentages.

The full IRC log of that discussion

<heycam> Topic: What's the optimal viewing rect on the root scroller?
<heycam> github: https://github.com//issues/4393
<heycam> emilio: while working through some scroll anchoring issues
<heycam> ... you need to decide what rect to anchor stuff to
<heycam> ... Firefox uses visual viewport, I think Blink uses layout viewport
<heycam> ... but are kind of reasonable
<heycam> ... but for layout viewport, need to decide the effect of padding etc.
<heycam> fantasai: my proposal is to use visual viewport, but that %s on the scroll-padding reference the layout viewport
<heycam> s/of padding/of scroll-padding/
<heycam> ... that's where you're likely to block out content
<heycam> TabAtkins: if we snap in the visual viewport, and you bring up the keyboard, it has to move?
<heycam> jensimmons: it depends
<heycam> fantasai: can leave that to the UA
<heycam> TabAtkins: sounds complicated, but I think that's the best route
<heycam> emilio: I think it's pretty reasonable
<heycam> iank_: seems like David is fine with this change
<heycam> fantasai: sounds like Blink is doing that
<fantasai> https://github.com//issues/4393#issuecomment-537844295
<heycam> Rossen: currently using the layout viewport, but if you're zoomed in you're not snapped at all
<heycam> iank_: but sounds like David Bokand is fine to switch to the visual viewport?
<heycam> s/Bokand/Bokan/
<heycam> RESOLVED: Use visual viewport for snapping and layout viewport for scroll-padding percentages.

[nickburris]

Note that the css-overflow spec seems clear that the scrollport is the visual viewport. I opened #4776 clarifying scroll-padding for the root scroller.

[fantasai]

Adjusted the edits to be a bit more precise, resulting in the following text:

When applied to the root viewport, the offset is calculated and applied relative to the layout viewport (rather than the visual viewport) the same way as the corresponding inset properties on fixed-positioned boxes; the optimal viewing region is the remaining area that intersects with the visual viewport.

@emilio @bokand @theres-waldo @nickburris Does this seem clear and reasonable to you?

[theres-waldo]

That seems clear, thanks.

I think it's also a reasonable choice. The alternative I can think of would be to calculate the offset relative to the layout viewport but apply it relative to the visual viewport, which would have the (significant) downside that the optimal viewing region could be very small or even empty at high zoom levels.

[bokand]

+1 that looks good to me, thanks!