Questo accade a causa di scroll anchoring in Chrome e Firefox (in arrivo su Safari). Questa funzionalità fa sì che i browser si “ancorino” a un elemento visibile, in modo che l’inserimento di contenuto sopra il viewport non causi uno spostamento della posizione di scorrimento.
Firefox ha una modalità di debug per questa funzionalità, che può essere abilitata visitando about:config e attivando layout.css.scroll-anchoring.highlight. Quindi, possiamo vedere che normalmente si ancora a qualcosa nello stream dei post:
Ma se scorri troppo in basso quando la timeline è collassata, allora la timeline viene scelta come punto di ancoraggio:
Come dice @don, questo accade perché l’ordine degli elementi nel DOM è diverso dall’ordine visualizzato. Sembra che l’algoritmo di scroll-anchoring attraversi il DOM in ordine e scelga il primo elemento completamente visibile che riesce a trovare. Quindi, se la timeline collassata è visibile, verrà sempre scelta prima del contenuto del post.
Cambiare l’ordine aiuterebbe, ma sarei preoccupato per possibili regressioni. Inoltre, mi chiedo se sia così per un motivo (screen reader, forse?)
La soluzione più semplice qui è impostare overflow-anchor: none sulla timeline. In questo modo, non verrà mai scelta per l’ancoraggio: