This happens because of scroll anchoring in Chrome and Firefox (coming soon in Safari). This feature makes browsers ‘anchor’ themselves to a visible element, so that inserting content above the viewport doesn’t cause a shift in scroll position.
Firefox has a debug mode for this feature, which can be enabled by visiting about:config
and toggling layout.css.scroll-anchoring.highlight
. So yeah we can see that normally it anchors against something in the post-stream:
But if you scroll down too far when the timeline is collapsed, then the timeline is chosen as the anchor point:
As @don says, this is because the order of elements in the DOM is different from the displayed order. Seems like the scroll-anchoring algorithm walks the DOM in order, and picks the first fully-in-viewport element it can find. So, if the collapsed timeline is in view, it’ll always be picked before the post content.
Switching the order would help, but yeah I would be worried about possible regressions. Plus, I wonder if it’s this way around for a reason (screen readers, maybe?)
The easiest fix here is to set overflow-anchor: none
on the timeline. Then, it’ll never be chosen for anchoring: