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)
We're interested in implementing this. I'll add it to the WebKit Status page.
<rdar://problem/31751673>
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
*** Bug 250578 has been marked as a duplicate of this bug. ***
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
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.
(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.
*** Bug 109640 has been marked as a duplicate of this bug. ***
Please fix this bug. Scroll Anchoring is crucial in the modern web with chat experiences, which require reverse infinite scrolling.
(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.