Browsers usually avoid this problem using something called "scroll anchoring". Basically, when you've scrolled down, the browser picks one of the elements visible on the screen, and if this element would move as a result of content being inserted elsewhere on the page, it adjusts the scroll position so that it remains in the same place on the screen. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring

This works perfectly in old Vector, but seems to fail in new Vector.

The element gets chosen by a long algorithm: https://w3c.github.io/csswg-drafts/css-scroll-anchoring/#anchor-node-selection and there's no normal API to see what is picked, but Firefox has a secret debug feature that can highlight the anchor node: https://twitter.com/b56girard/status/1424851600045076503

Just got this protip from @ecbos_. Firefox pref 'layout.css.scroll-anchoring.highlight' lets you debug your scroll anchor. Getting this right is handy for virtualizing dynamic lists. Looks like Twitter anchors to the wrong place.

And it turns out that it picks the grid column containing the sticky TOC, which doesn't move as a result of these gadget changes, and so this choice doesn't help avoid the shifts:

We can mark it with overflow-anchor: none https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor so that it doesn't get picked as the anchor node. We also need to do the same for the other grid column on the right. And then we get a reasonable result – something in the content is the anchor node:

The reason Vector 2022 is suffering from this, unike Vector 2010, is a combination of two changes:

• The navigation was moved before the content in the DOM / HTML. Elements earlier in the DOM are preferred when picking the anchor node, so the navigation can be picked as long as it's visible on the screen.
• The layout is done using CSS grid, instead of CSS 2 techniques like positioning or floats. Grid columns span the whole height of the page, and as a result they are always visible on the screen and viable candidates for the anchor node. (Note: this is not caused by position: sticky, as the behavior was the same when I removed it from the TOC/tools.)

Change 890515 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Vector@master] Disallow scroll anchoring in navigation grid columns

https://gerrit.wikimedia.org/r/890515

Demo:

• Before: https://patchdemo.wmflabs.org/wikis/5866a7fa8b/wiki/United_States_Department_of_Health_and_Human_Services#Organization
• After: https://patchdemo.wmflabs.org/wikis/b800367031/wiki/United_States_Department_of_Health_and_Human_Services#Organization

Of note. https://caniuse.com/?search=overflow-anchor is apparently not supported on Safari and/or iOS. @Jdlrobson sounds to me like a good topic for a Safari rant on Twitter ;)

Related tickets:
https://bugs.webkit.org/show_bug.cgi?id=171099 (scroll anchoring algo)
https://bugs.webkit.org/show_bug.cgi?id=109640 (overflow-anchor property)

Change 890515 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Disallow scroll anchoring in navigation grid columns

https://gerrit.wikimedia.org/r/890515

This one should be QAed either by editing or web team.

It's in so far a partial fix, that it only works in Firefox and Chrome. And improving some of the gadgets a bit more might improve the experience on other platforms (and should probably happen regardless).

In other words, it should fix all of the issues, in supporting browsers.

I don't think you need any additional QA; I am hoping that some folks who reported the issues will confirm that they are fixed after the deployment.

I'd suggest that after closing this one, you could QA the parent tasks (T317967, T322837, T321221), since I think they should all be fixed (but I didn't carefully read through the discussion to figure out the exact requirements).

I'll check my repro (T321221), which currently still has the old behavior. Are you planning to roll this out to en.wikipedia first?

The fix will be deployed to all Wikimedia wikis next week on the usual schedule, including en.wikipedia on Thursday, 3 March.

Passing per T330108#8645215

My version of this bug, T321221, seems fixed on en wikipedia today.

FYI. Safari now supports the scroll anchoring algo (in the new Safari version of sep 2023), https://bugs.webkit.org/show_bug.cgi?id=261628 but not yet overflow-anchor. I haven't had time to test this yet on my devices.