Bug 171099 - Implement scroll anchoring
Summary: Implement scroll anchoring
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
: 109640 250578 (view as bug list)
Depends on: 243309 243482 243702 261628
  Show dependency treegraph
Reported: 2017-04-20 22:08 PDT by Rick Byers
Modified: 2024-05-13 20:34 PDT (History)
22 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Rick Byers 2017-04-20 22:08:23 PDT
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)
Comment 1 Dean Jackson 2017-04-20 22:12:17 PDT
We're interested in implementing this. I'll add it to the WebKit Status page.
Comment 2 Radar WebKit Bug Importer 2017-04-20 22:24:28 PDT
Comment 3 Steven K 2021-05-19 12:53:42 PDT
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.
Comment 4 mustafa.0x 2022-10-25 06:55:44 PDT
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
Comment 5 Rob Buis 2023-01-13 11:10:33 PST
*** Bug 250578 has been marked as a duplicate of this bug. ***
Comment 6 Derk-Jan Hartman 2023-02-21 02:17:58 PST
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
Comment 7 Matt Reimer 2023-04-20 08:29:38 PDT
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.
Comment 8 Tim Nguyen (:ntim) 2023-04-20 08:39:59 PDT
(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.
Comment 9 Tim Nguyen (:ntim) 2023-12-11 19:05:07 PST
*** Bug 109640 has been marked as a duplicate of this bug. ***
Comment 11 lwdthe1 2024-02-07 10:25:23 PST
Please fix this bug. Scroll Anchoring is crucial in the modern web with chat experiences, which require reverse infinite scrolling.
Comment 12 Matt Reimer 2024-02-07 11:09:52 PST
(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.