Hide Details going to end of hidden details automatically

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:

6 Likes