Bug 171099 – Implement scroll anchoring

• Component: Scrolling
• Status: NEW

[Rick Byers]

Scroll anchoring is a feature designed to avoid unintended jumps of the content while (or even after) a page is loading - keeping what the user is looking at in view. It relies on some heuristics to avoid web compat issues, but includes an explicit opt-out API (overflow-anchor CSS property) for sites designed not to need it.  It took quite a bit of iteration to get the web compat right, but it's now been shipping since Chrome 56 without issue, so we're convinced it has stuck. We're seeing about 11% of page views on Android trigger anchoring logic at least once, and about 6% on desktop.

Summary / video: https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html
Explainer: https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
Draft spec: https://wicg.github.io/ScrollAnchoring
CSSWG discussion: https://github.com/w3c/csswg-drafts/issues/676
Blink implementation: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/layout/ScrollAnchor.cpp

Feel free to file issues (https://github.com/WICG/ScrollAnchoring/issues) for any concerns, questions or suggestions.  Let us know if you think you might implement and we'll try to get some web-platform-tests upstreamed (https://github.com/WICG/ScrollAnchoring/issues/3)

[Dean Jackson]

We're interested in implementing this. I'll add it to the WebKit Status page.

[Radar WebKit Bug Importer]

<rdar://problem/31751673>

[Steven K]

Scroll anchoring would really help simplify things. Was hoping to leverage this for a jump-to-specific-spot-on-page-load feature (where the browser default of jumping to element with ID that matches the URL fragment can't be used since the content is asynchronously retrieved). Unfortunately, the lack of current WebKit support for this feature requires I find some way to avoid everything jumping down when content above the scrolled-to spot loads in.

Is there an update on timing/priority for this? I looked in the feature status (https://webkit.org/status/) for this, but didn't see an entry.

This is an important feature for many apps, especially chat apps.

Web developers often complain that that Safari lacks this feature. Eg https://www.bennadel.com/blog/3724-maintaining-scroll-offsets-when-adding-content-above-the-users-viewport-in-angular-9-0-0-rc-2.htm

[Rob Buis]

*** Bug 250578 has been marked as a duplicate of this bug. ***

[Derk-Jan Hartman]

This is a significant problem on Wikipedia right now, where the browsers are picking an incorrect place to anchor when you initially navigate to a page anchor quite often in their newer skin (which has its navigation elements before the content where most anchors are). See also: https://phabricator.wikimedia.org/T330108#8631197


On most browsers this will be mitigated with overflow-anchor:none being applied to the menu elements that we don't want the browser to anchor to, but unfortunately it is not supported in Webkit see https://caniuse.com/?search=overflow-anchor and https://bugs.webkit.org/show_bug.cgi?id=109640

[Matt Reimer]

WebKit CSS Feature Status says overflow-anchor is supported, but e.g. this demo seems to indicate it doesn't work: https://css-tricks.com/almanac/properties/o/overflow-anchor/#aa-demo

Is overflow-anchor expected to work? Should I test differently?

Thanks for your work on this important feature.

[Tim Nguyen (:ntim)]

(In reply to Matt Reimer from comment #7)
> WebKit CSS Feature Status says overflow-anchor is supported

That is misleading, it is currently not implemented, we should probably update this.

[Tim Nguyen (:ntim)]

*** Bug 109640 has been marked as a duplicate of this bug. ***

[lwdthe1]

Please fix this bug. Scroll Anchoring is crucial in the modern web with chat experiences, which require reverse infinite scrolling.

[Matt Reimer]

(In reply to lwdthe1 from comment #11)
> Please fix this bug. Scroll Anchoring is crucial in the modern web with chat
> experiences, which require reverse infinite scrolling.

Try the current Tech Preview. It seems to be working pretty well, at least for my use cases.

[Sam Zander]

(In reply to Matt Reimer from comment #7)
> WebKit CSS Feature Status says overflow-anchor is supported, but e.g. this
> demo seems to indicate it doesn't work:
> https://css-tricks.com/almanac/properties/o/overflow-anchor/#aa-demo https://geometrydashs.io/geometry-dash-breeze
> 
> Is overflow-anchor expected to work? Should I test differently?
> 
> Thanks for your work on this important feature.

Any update?

[Matt Reimer]

(In reply to Sam Zander from comment #13)
> (In reply to Matt Reimer from comment #7)
> > WebKit CSS Feature Status says overflow-anchor is supported, but e.g. this
> > demo seems to indicate it doesn't work:
> > https://css-tricks.com/almanac/properties/o/overflow-anchor/#aa-demo https://geometrydashs.io/geometry-dash-breeze
> > 
> > Is overflow-anchor expected to work? Should I test differently?
> > 
> > Thanks for your work on this important feature.
> 
> Any update?

The aforementioned test works properly on Safari Tech Preview release 208 with Scroll anchoring enabled.