Elementi “sticky” (CSS position: sticky) su Discourse sono sempre stati un po’ “janky” sul mio iPad (9a generazione, tutto aggiornato). Tremolano un po’ durante lo scorrimento, reagiscono male, con ritardi, a un improvviso cambio di direzione dello scorrimento.
Con l’introduzione della nuova barra laterale (anch’essa un elemento “sticky”), è diventato più fastidioso, poiché è una parte così consistente dell’interfaccia utente che non è super stabile.
Il colpevole è la variabile --header-offset. Rimuovere questa variabile in CSS rende stabili gli elementi “sticky” dell’interfaccia utente, come dovrebbero essere.
L’header è alto 4em per impostazione predefinita. Ho sostituito la variabile --header-offset in CSS per Timeline, Sticky-avatar e la barra laterale con 4em per calcolare la loro posizione:
.d-header
{
box-sizing: border-box;
height: 4em;
}
.sidebar-wrapper
{
top: 4em;
height: calc(100vh - 4em);
}
@media screen and (min-width: 925px)
{
.container.posts .topic-navigation
{
top: 6em;
}
}
.topic-post.sticky-avatar .topic-avatar
{
top: 3.75em;
}
(box-sizing è presente perché ho un bordo sul mio header, non correlato)
Sono curioso riguardo alla funzione di questa variabile, l’header non cambia mai altezza per quanto ne so, a parte cambiare la dimensione del testo, e usar em per la sua altezza se ne occupa.
Non so se c’è un modo per ottimizzare --header-offset su Safari mobile, ma la mia soluzione alternativa risolve questo piccolo problema di prestazioni. Discourse sembra molto più rifinito quando gli elementi “sticky” sono veramente “sticky” 
(Non ho alcun problema con questi elementi su Firefox o Chrome sul mio desktop, quindi potrebbe essere un bug di Safari)