Scroll anchoring on layout

[rschoen]

I've frequently heard users complain that they'll be reading the main content of a page (such as a news article) and an image or other content will finish loading above their current scroll position. In the current behavior, this pushes the content down, jarring the UX. The users I've heard from report this as a major annoyance.

Instead, perhaps we should take a reasonable guess at what is the "main" content of the page, and anchor the scroll position to that. Then when the page shifts, the main content stays in the same position in the viewport.

[dbaron]

I've wanted to do something like this in Gecko for years; see https://bugzilla.mozilla.org/show_bug.cgi?id=43114 . I was motivated by some other use cases as well, such as better position preservation when resizing a window (especially in a document like a specification, and especially when the current scroll position is an anchor). I never quite had the time to finish it...

[KenjiBaheux]

We have a working prototype of Scroll Anchoring in the latest Dev/Canary channel.

• update to the latest dev/canary
• enable Scroll Anchoring from chrome://flags/#enable-scroll-anchoring
• relaunch

We would love feedback on the following:

Field reports to https://goo.gl/HGPXz9

• reflow that the mitigation fails to address (completely, partially)
• reflow that we should not have mitigated (broke something)

Developer insights (as comments to this issue):

• how this could backfire (i.e. break legit cases)
• when and how you would want to opt-out of the intervention (e.g. explicitly via a JS API, CSS property to forbid anchoring on an element?)

@dbaron we would love to hear your thoughts or what you've learned from trying in the past. cc/ @ojanvafai @rschoen

Known caveats (master crbug):

• On-screen reflows currently not yet being taken care of.
• Only works for a subset of the reflows but looking forward to your reports.
• Disabled on History Back and Reload (desired behavior is TBD).
• etc.

Overall, we expect lots of iterations before we are happy with it.

[skobes-chromium]

I have added an informal explainer doc for scroll anchoring at https://github.com/WICG/interventions/blob/master/scroll-anchoring/explainer.md.

It includes a description of the algorithm and an opt out mechanism via a CSS "overflow-anchor" property.

Feedback is welcome. :)

[toddreifsteck]

Adding Matt Rakow to issue to make him aware @ChumpChief

[skobes-chromium]

I've updated the explainer doc for scroll anchoring to include the latest changes that have been made to Chrome's implementation: https://github.com/WICG/interventions/blob/master/scroll-anchoring/explainer.md

I'd love to get feedback from the WICG particularly on any of the first four items under "Open Issues":

• Definition of Layout-Affecting Property
• Separating Opt Out and Exclusion APIs
• Opt In for Simpler Anchoring
• Anchoring to Absolute-Positioned Elements

[skobes-chromium]

FYI: the scroll anchoring docs have been moved out of the interventions repo and into: https://github.com/skobes/ScrollAnchoring

There is a proposal to transfer the ScrollAnchoring repo to WICG at: https://discourse.wicg.io/t/proposal-scroll-anchoring/1752

Please file any new scroll anchoring issues at: https://github.com/skobes/ScrollAnchoring/issues

[RByers]

First shipped in Chrome 56

[johannhof]

(As noted in #72, we intend to archive this repository and are thus triaging and resolving all open issues)

This seems to be resolved cleanly with a spec at https://drafts.csswg.org/css-scroll-anchoring/ and implementations in Chrome and Firefox. Closing the issue.