이것은 Chrome과 Firefox(곧 Safari에도 도입 예정)의 스크롤 앵커링 때문에 발생합니다. 이 기능은 브라우저가 가시적인 요소에 '고정’되도록 하여 뷰포트 위에 콘텐츠가 삽입되더라도 스크롤 위치가 이동하지 않도록 합니다.
Firefox에는 이 기능을 위한 디버그 모드가 있으며, about:config에 접속하여 layout.css.scroll-anchoring.highlight를 토글하여 활성화할 수 있습니다. 그렇기 때문에 일반적으로는 포스트 스트림 내의 어떤 요소에 앵커링되는 것을 볼 수 있습니다:
하지만 타임라인이 접힌 상태에서 너무 아래로 스크롤하면, 타임라인이 앵커 포인트로 선택됩니다:
@don이 말했듯이, 이는 DOM에서 요소의 순서가 표시되는 순서와 다르기 때문입니다. 스크롤 앵커링 알고리즘은 DOM 순서대로 탐색하며, 뷰포트 안에 완전히 들어 있는 첫 번째 요소를 선택하는 것 같습니다. 따라서 접힌 타임라인이 화면에 보인다면, 포스트 콘텐츠보다 항상 먼저 선택될 것입니다.
순서를 바꾸면 도움이 될 수 있지만, 가능한 회귀 문제(regression)에 대해 우려됩니다. 또한 이것이 의도적으로 이렇게 설정된 것은 아닌지 궁금합니다(화면 판독기 때문일까요?).
가장 쉬운 수정 방법은 타임라인에 overflow-anchor: none을 설정하는 것입니다. 그러면 앵커링 대상으로는 절대 선택되지 않습니다: