1305957 - Page scroll position is not consistent while content is loading (implement "scroll anchoring")

Status: RESOLVED FIXED

(Core :: Layout, defect, P3)

Description

[norlin]

Attachment: scroll-bug.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20160926162149

Steps to reproduce:

1. Open any page with several large images (or other dynamically loaded content with significant height)
2. With no waiting for images, scroll down for some point.
3. When images are loaded one by one, the browser does not keep you on selected point, rather loaded images are "pushed" all content below and you need to scroll again to find the point.


Actual results:

3. When images are loaded one by one, the browser does not keep you on selected point, rather loaded images are "pushed" all content below and you need to scroll again to find the point.

Very annoying.
It's happening even when anchor exists (open the example page with, say, #anchor3)


Expected results:

Browser should remember somehow the selected point and keep scroll there while content is loading

Comment 1

[Markus Stange [:mstange]]

So this is basically asking for something like Chrome's experimental "Scroll Anchoring", https://developers.google.com/web/updates/2016/04/scroll-anchoring?hl=en .

I thought we had an existing bug about it, but I can't find it.

Comment 2

[norlin]

(In reply to Markus Stange [:mstange] from comment #1)
> something like Chrome's experimental "Scroll Anchoring",

Exactly! (Didn't knew Chrome has this feature)

Comment 3

[Kartikaya Gupta (email:[e-mail])]

I don't think we have any existing bug on this, it just came up in email or IRC discussion somewhere. This can be the bug :)

Comment 4

[Šime Vidas]

Chrome Canary has now enabled this feature by default, and it is expected to ship in Chrome 56: https://www.chromestatus.com/feature/5700102471548928. I have tweeted about this some hours ago (https://twitter.com/simevidas/status/799510987460214785), and have since then been showered with positive responses (most of them in “quote tweets”). I think, it would be a good idea to put a priority on this bug. Could someone notify D. Baron?

Comment 5

[Botond Ballo [:botond]]

For comment 4.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

FWIW, the existing bug on this was bug 43114.

I think this is worth doing, but I've never quite managed to get it to the top of my own priority list.  (I did briefly once, and then I was dragged away for the original crashkill effort.)

It seems like the Chrome team has done a bunch of good research as to what aspects of this are Web-compatible.

I had somewhat-different ideas as to how to do the anchoring (e.g., bug 43114 comment 10, and using named anchors as the anchor when available) and a little bit more in a local patch that I started.  Those could probably be added later if desirable.

Comment 7

[Andreas Bovens [:abovens]]

This has been featured extensively in https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html According to the Chrome team, "scroll anchoring is preventing about three page jumps per page-view."

David, Jet, we should probably look into prioritizing this.

Comment 8

[Botond Ballo [:botond]]

It looks like this is now a draft CSSWG spec.

See also this explainer document:

https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md

Comment 9

[Botond Ballo [:botond]]

We should implement relative scroll offset updates for APZ (bug 1453425) before enabling this; otherwise, this will just be another source of main-thread driven scroll offset updates that can interfere with async scrolling.

(There's no need for _implementation_ work on this to be blocked on bug 1453425, just the eventual enablement.)

Comment 10

[Sylvestre Ledru [:Sylvestre]]

Clearly ni on Jet as he no longer works at Mozilla.

Comment 12

[Ryan Hunt [:rhunt]]

Attachment: scroll-anchoring-proto.patch

After I finish bug 1453425 I'd like to take this.

I experimented and wrote this prototype patch that implements the scroll anchoring spec without adjustment suppression or the opt-out CSS property.

The test case I was focusing on getting working is here [1]. Scroll down to the button that says 'Add element to top' and click it. With scroll anchoring you should not have content slide down after you click. I can confirm with Chrome and Firefox + this patch, that's the observed behavior.

I also added code to highlight the current scroll anchor as it changes for debugging. Here's the test case I wrote for seeing the interaction with different `display, position, float` options [2].

[1] https://eqrion.github.io/web-tests/scrolling/scroll-anchor-test-1.html
[2] https://eqrion.github.io/web-tests/scrolling/scroll-anchor-selection.html

Comment 13

[Calabar]

@Ryan Hunt
Thanks for taking this bug. I think this is a primary issue that afflicts user experience with Firefox in a very noticeable way. 

I just want to add an example, hoping it could help to cover all the cases scenarios related to this bug. 
In my experience, the problem don't happen only when a page is loading, but when I scroll a page that loads dynamically. In these cases wait for the page finishes loading is not a solution, and that's why it is very annoying. 

The problems happens, for example, when I scroll a wanted list on Amazon. The page loads the elements in the list (and other elements in the page such as suggested products on the bottom) while you scroll it, so simply check the list become a pain. 

I hope Firefox could have its "scroll anchoring" soon.

Comment 14

[Ryan Hunt [:rhunt]]

Okay I think the patches are ready for review now. Here's my last try run [1]. It's green minus some WPT failures in the scroll-anchoring tests where I was trying to get the latest passes and failures.

[1] https://treeherder.mozilla.org/#/jobs?repo=try&revision=0851d651e35cfec44995e72088c855483a154b11

Comment 15

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 1 - Add 'layout.scroll-anchoring.enabled' preference behind nightly flag. r=hiro

Comment 16

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 2 - Add 'overflow-anchor' CSS property. r=emilio

https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api

Depends on D13263

Comment 17

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 3 - Add IsStickyPositioned() method to nsStyleDisplay. r=emilio

This commit is used in a later commit to exclude frames that are sticky positioned
from being scroll anchors.

Depends on D13265

Comment 18

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 4 - Add basic ScrollAnchorContainer implementation. r=hiro

This commit adds a barebones class called 'ScrollAnchorContainer' that will
contain most of the logic for scroll anchoring. It is owned as a member of
ScrollFrameHelper, and has the same lifetime.

Depends on D13266

Comment 19

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 5 - Add implementation of scroll anchor selection and invalidation. r=hiro,dbaron,dholbert

This commit implements candidate selection for a scroll frame using a frame tree
traversal. It roughly tries to follow the algorithm given in the scroll
anchoring draft specification, adapted to operate on the frame tree [1].

Some details, such as not selecting an anchor if the user hasn't scrolled are
not currently in the specification but will be to match Blink's implementation.

Once a scroll anchor has been selected, we maintain a bit on it and its ancestor
frame's states. This is used in a later commit to detect changes to position
during a reflow so the scroll frame can perform an adjustment.

A scroll anchor will be invalidated when the user scrolls the frame or the
scroll anchor is destroyed. Later commits will add logic to drive selection and
invalidation appropriately.

[1] https://drafts.csswg.org/css-scroll-anchoring/#anchor-node-selection

Depends on D13267

Comment 20

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 6 - Select scroll anchors when flushing notifications in PresShell. r=hiro

This commit adds a mechanism for scroll anchor containers to request an anchor
node selection at a future time. Currently this is before styling so that anchor
adjustment suppression will have current anchor nodes.

Depends on D13268

Comment 21

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 7 - Adjust scroll offset to match change in relative position of scroll anchor after reflow. r=hiro,dbaron

This commit implements anchor offset adjustment. When the position of a frame
that is an anchor is changed during reflow, we notify the anchor container. The
anchor container will then post a reflow callback.

Then when reflow is completed, the anchor container will perform a scroll to
keep the anchor node in the same relative position.

Depends on D13269

Comment 22

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 8 - Suppress scroll offset adjustment when some layout affecting properties are changed on scroll anchor or its ancestors. r=hiro

This commit implements the first half of the heuristics to detect style changes
that could lead to feedback loops with scroll anchoring. [1]

When these style changes are made, a suppression flag is added to the anchor
container to ignore any adjustments that would be made at the next layout flush
and to invalidate the anchor at that time.

[1] https://drafts.csswg.org/css-scroll-anchoring/#suppression-triggers

Depends on D13270

Comment 23

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 9 - Expand nsChangeHint to 64 bits. r?emilio

This will be needed to add a new change hint to detect changes to the position
property, in the next commit.

Depends on D13271

Comment 24

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 9 - Suppress scroll offset adjustment when node moves into flow or out of flow inside of a scrollable frame. r=emilio

This commit implements the second half of the heuristics to detect style changes
that could lead to feedback loops with scroll anchoring. [1]

A new change hint is added for when a style is changed from positioned to not
positioned. When this hint is applied, scroll anchor suppression is triggered in
the scroll anchor container where the frame used to be, and the new scroll
anchor container where the frame is added after reconstruction.

[1] https://drafts.csswg.org/css-scroll-anchoring/#suppression-triggers

Depends on D13272

Comment 25

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 11 - Make sure scroll anchoring web-platform-tests are fully scrollable on larger window sizes. r=hiro

Some of these tests were failing on try but passing locally because of viewport
size differences. This commit expands some spacing to ensure the tests are fully
scrollable on most screen sizes.

Depends on D13273

Comment 26

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 12 - Update web-platform-test expectations for scroll anchoring. r=hiro

Not all tests are passing with the initial implementation. Most are due to
differences between Gecko and Blink with regards to ScrollTop, ScrollLeft in
documents with writing-mode: vertical-rl. Some are due to issues in our anchor
node selection algorithm remaining.

Depends on D13274

Comment 27

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 13 - Highlight scroll anchor when 'layout.scroll-anchoring.highlight' is enabled. r=mattwoodrow

This commit adds a debug pref that will highlight the frames that are marked as
anchor nodes. This is helpful to debug anchor selection.

Depends on D13275

Comment 28

[Ryan Hunt [:rhunt]]

I tried to pick appropriate reviewers for all the patches, but please feel free to review whichever patches you think necessary and bring in anyone who should be included.

Comment 29

[Ryan Hunt [:rhunt]]

I've filed some bugs for follow-up work.

I have patches for most of them, but don't want to delay landing the initial implementation in nightly for them to be reviewed.

Comment 30

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 10 - Add block box inside of inline-box so it can be an anchor for 'start-edge-in-block' scroll-anchoring test. r=dholbert

Depends on D13273

Comment 31

[Ryan Hunt [:rhunt]]

Attachment: Bug 1305957 part 14 - Disable scroll-anchoring in webconsole-output.

Depends on D13276

Comment 32

[Ryan Hunt [:rhunt]]

Try run looks good [1]. There's just one last issue I found in a devtools test. Once the commit to fix that is reviewed, we should be good to go.

[1] https://treeherder.mozilla.org/#/jobs?repo=try&revision=53b6c49a9f82bf7427683ba10b78460fa87fc786

Comment 33

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/6bd0bdab93cb
part 1 - Add 'layout.scroll-anchoring.enabled' preference behind nightly flag. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/c66c00f73296
part 2 - Add 'overflow-anchor' CSS property. r=emilio
https://hg.mozilla.org/integration/mozilla-inbound/rev/6b96050386f6
part 3 - Add IsStickyPositioned() method to nsStyleDisplay. r=emilio
https://hg.mozilla.org/integration/mozilla-inbound/rev/3033401ef320
part 4 - Add basic ScrollAnchorContainer implementation. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/bdb766faa867
part 5 - Add implementation of scroll anchor selection and invalidation. r=hiro,dbaron,dholbert
https://hg.mozilla.org/integration/mozilla-inbound/rev/e7124fecb721
part 6 - Select scroll anchors when flushing notifications in PresShell. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/d9052f7b34d9
part 7 - Adjust scroll offset to match change in relative position of scroll anchor after reflow. r=hiro,dbaron
https://hg.mozilla.org/integration/mozilla-inbound/rev/d9445a5f3458
part 8 - Suppress scroll offset adjustment when some layout affecting properties are changed on scroll anchor or its ancestors. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/e76b842c7b7f
part 9 - Suppress scroll offset adjustment when node moves into flow or out of flow inside of a scrollable frame. r=emilio
https://hg.mozilla.org/integration/mozilla-inbound/rev/bfca5019a9cc
part 10 - Add block box inside of inline-box so it can be an anchor for 'start-edge-in-block' scroll-anchoring test. r=dholbert
https://hg.mozilla.org/integration/mozilla-inbound/rev/b4cb2cbebdb6
part 11 - Make sure scroll anchoring web-platform-tests are fully scrollable on larger window sizes. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/950bf6ad1ef2
part 12 - Update web-platform-test expectations for scroll anchoring. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/d8eef8f3e396
part 13 - Highlight scroll anchor when 'layout.scroll-anchoring.highlight' is enabled. r=mattwoodrow
https://hg.mozilla.org/integration/mozilla-inbound/rev/51c86d025ecb
part 14 - Disable scroll-anchoring in webconsole-output. r=nchevobbe

Comment 34

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/4d5eb85d3155
Regenerate the devtools css properties-db.js. r=me

Comment 35

[Bogdan Tara[:bogdan_tara | bogdant]]

Backed out 15 changesets (Bug 1305957) for ASAN failures.

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&revision=51c86d025ecb710b8d37d3454a1d0adcfff8f89d&selectedJob=221114559

Backout link: https://hg.mozilla.org/integration/mozilla-inbound/rev/842b7a62d9cefd5030c5561d536af8414899af7a

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=221114559&repo=mozilla-inbound&lineNumber=1905

Comment 36

[Bogdan Tara[:bogdan_tara | bogdant]]

The following first appeared on the initial 14 changesets push:

https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&collapsedPushes=421630&revision=51c86d025ecb710b8d37d3454a1d0adcfff8f89d&selectedJob=221111493

https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&collapsedPushes=421630&revision=51c86d025ecb710b8d37d3454a1d0adcfff8f89d&selectedJob=221112217

Comment 37

[Ryan Hunt [:rhunt]]

The issue was an invalid lifetime assumption in RestyleManager. Here's an ASAN run with the fix applied [1]

[1] https://treeherder.mozilla.org/#/jobs?repo=try&revision=1770f59bdc9ce00399f699b3477ea0dca57a94d8

Comment 38

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/4e60d1fb951f
part 1 - Add 'layout.scroll-anchoring.enabled' preference behind nightly flag. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/8c9be913b3e6
part 2 - Add 'overflow-anchor' CSS property. r=emilio
https://hg.mozilla.org/integration/mozilla-inbound/rev/399c5fe7c934
part 3 - Add IsStickyPositioned() method to nsStyleDisplay. r=emilio
https://hg.mozilla.org/integration/mozilla-inbound/rev/52a6a35a238d
part 4 - Add basic ScrollAnchorContainer implementation. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/b6c42df7ce09
part 5 - Add implementation of scroll anchor selection and invalidation. r=hiro,dbaron,dholbert
https://hg.mozilla.org/integration/mozilla-inbound/rev/462f25bfdc65
part 6 - Select scroll anchors when flushing notifications in PresShell. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/a4257d0470d7
part 7 - Adjust scroll offset to match change in relative position of scroll anchor after reflow. r=hiro,dbaron
https://hg.mozilla.org/integration/mozilla-inbound/rev/eef9ed24a061
part 8 - Suppress scroll offset adjustment when some layout affecting properties are changed on scroll anchor or its ancestors. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/3f00aed52fb3
part 9 - Suppress scroll offset adjustment when node moves into flow or out of flow inside of a scrollable frame. r=emilio
https://hg.mozilla.org/integration/mozilla-inbound/rev/4b492273f763
part 10 - Add block box inside of inline-box so it can be an anchor for 'start-edge-in-block' scroll-anchoring test. r=dholbert
https://hg.mozilla.org/integration/mozilla-inbound/rev/da81605d3695
part 11 - Make sure scroll anchoring web-platform-tests are fully scrollable on larger window sizes. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/f2ff150468c2
part 12 - Update web-platform-test expectations for scroll anchoring. r=hiro
https://hg.mozilla.org/integration/mozilla-inbound/rev/a245309e92fd
part 13 - Highlight scroll anchor when 'layout.scroll-anchoring.highlight' is enabled. r=mattwoodrow
https://hg.mozilla.org/integration/mozilla-inbound/rev/e31c9494b9a6
part 14 - Disable scroll-anchoring in webconsole-output. r=nchevobbe

Comment 39

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/14812 for changes under testing/web-platform/tests

Comment 40

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/14816 for changes under testing/web-platform/tests

Comment 41

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/4e60d1fb951f
https://hg.mozilla.org/mozilla-central/rev/8c9be913b3e6
https://hg.mozilla.org/mozilla-central/rev/399c5fe7c934
https://hg.mozilla.org/mozilla-central/rev/52a6a35a238d
https://hg.mozilla.org/mozilla-central/rev/b6c42df7ce09
https://hg.mozilla.org/mozilla-central/rev/462f25bfdc65
https://hg.mozilla.org/mozilla-central/rev/a4257d0470d7
https://hg.mozilla.org/mozilla-central/rev/eef9ed24a061
https://hg.mozilla.org/mozilla-central/rev/3f00aed52fb3
https://hg.mozilla.org/mozilla-central/rev/4b492273f763
https://hg.mozilla.org/mozilla-central/rev/da81605d3695
https://hg.mozilla.org/mozilla-central/rev/f2ff150468c2
https://hg.mozilla.org/mozilla-central/rev/a245309e92fd
https://hg.mozilla.org/mozilla-central/rev/e31c9494b9a6

Comment 42

[Ryan Hunt [:rhunt]]

I've filed bug 1519644 to be the general meta-bug for all scroll anchoring issues, whether they block the initial release or are future improvements that would be good to do (I expect more of these over time).

Bug 1515946 will still be just for issues blocking the initial release.

Comment 43

[Liz Henry (:lizzard) (relman/hg->git project)]

Ryan, can you suggest a release note? Thanks!

Comment 44

[Ryan Hunt [:rhunt]]

I'll do my best, please edit as necessary.

"Improved scrolling behavior: Firefox will now attempt to keep content from jumping around while a page is loading by supporting scroll anchoring."

Comment 45

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/15057 for changes under testing/web-platform/tests

Comment 46

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 47

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/b1ccec0b7afa
[wpt PR 14816] - [Gecko Bug 1305957] Backed out 15 changesets (bug 1305957) for ASAN failures CLOSED TREE, a=testonly

Comment 48

[matteo]

Hello, I installed Firefox 66 beta but I don't find this feature as reliable as it is on Google Chrome. Here is an example link where scroll anchoring doesn't appear to work at all, unless I'm missing something:

https://discuss.flarum.org/d/5293-rainbow-comic-sans/22

The /22 at the end of the URL makes the page scroll to a specific post in the page (the one with ID 22).

When I load the URL with Chrome, the scrolling correctly "points" to the text message by "Ralkage", with ID 22 (you can check that by clicking on the date near the author of the message).

When I load the URL with Firefox, a different message is shown at the top of the page. Specifically, the image contained in the post with ID 21 (by "0E800") is shown, because it is loaded after the page was scrolled down, causing a content jump.

I've done the tests using incognito mode in order to avoid image caching.

Is this a scenario that is not covered by scroll anchoring?

Thanks.

Comment 49

[Emilio Cobos Álvarez (:emilio)]

(In reply to matteo from comment #48)

FWIW, it's easy to miss stuff in closed bugs, it's better if you file a new one blocking this one.

Hello, I installed Firefox 66 beta but I don't find this feature as reliable as it is on Google Chrome. Here is an example link where scroll anchoring doesn't appear to work at all, unless I'm missing something:

https://discuss.flarum.org/d/5293-rainbow-comic-sans/22

The /22 at the end of the URL makes the page scroll to a specific post in the page (the one with ID 22).

When I load the URL with Chrome, the scrolling correctly "points" to the text message by "Ralkage", with ID 22 (you can check that by clicking on the date near the author of the message).

When I load the URL with Firefox, a different message is shown at the top of the page. Specifically, the image contained in the post with ID 21 (by "0E800") is shown, because it is loaded after the page was scrolled down, causing a content jump.

This looks like a fairly complex test-case, where there's not only scroll anchoring at play, there needs to be other stuff going on as well (they need to manually call scrollIntoView(), I'd guess). So it's not clear to me if scroll anchoring is at play at all here, or it's just the page making bad assumptions, or is other kind of Firefox bug.

In any case, please do file a bug for this. Feel free to CC me and Ryan (:rhunt), and we can try to take a look... A sort of reduced test-case would be immensely helpful to diagnose this though, do you know if Disqus' code is open source somewhere? Otherwise it's much harder to debug.

Comment 50

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/9eb38c69446b
[wpt PR 14816] - [Gecko Bug 1305957] Backed out 15 changesets (bug 1305957) for ASAN failures CLOSED TREE, a=testonly

Comment 51

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/9eb38c69446b

Comment 52

[Chris Mills [:cmills]]

Note to MDN writers — I've added a note to the Fx66 rel notes to cover this: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/66#CSS

I think the docs probably need a page for overflow-anchor, and a page to expain what this feature is and show some kind of demo.

Comment 53

[Chris Mills [:cmills]]

Docs complete; Rachel Andrew wrote a ref page for overflow-anchor, and a brief explainer

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring