If you click a section edit link that is very close to the top of the page the heading scrolls up slightly, instead of down to where it will appear in the editor.
This appears to be an issue with using window.scrollTo as if we use the jQuery method the scrolling is fine. Possibly caused by the toolbar pushing the page down, and Chrome trying to be clever and account for it?
Works fine in Firefox.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Improve smooth scroll to section behaviour | mediawiki/extensions/VisualEditor | master | +34 -15 |
It looks like the scroll error is not some fixed value, but inversely proportional to the amount we scroll up by. So if the heading starts in the middle of the page and has a long way to scroll, the error is very small.
At a guess it could be a browser bug to do with font size change somewhere on the page?
Commenting out the height transition of the toolbar placeholder causes things to behave consistently again, so that would appear to be the root cause.
If that's the case, we might be able to fix it by disabling scroll anchoring: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
Change 762832 had a related patch set uploaded (by Esanders; author: Esanders):
[mediawiki/extensions/VisualEditor@master] Improve smooth scroll to section behaviour
I realised we don't need need the height transition if the toolbar is floating, so we can use scroll anchoring (or a fallback for browser that don't support it), then do the scroll animation after the toolbar is in place and at final height.
Change 762832 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Improve smooth scroll to section behaviour