Elementos fixos (CSS position: sticky) no Discourse sempre foram um pouco instáveis no meu iPad (9ª geração, tudo atualizado). Tremem um pouco ao rolar, reagem mal, com atrasos, a mudanças bruscas na direção da rolagem.
Com a introdução da nova barra lateral (também um elemento fixo), ficou mais chocante, pois é uma parte considerável da interface que não é muito estável.
O culpado é a variável --header-offset. Remover essa variável no CSS torna os elementos fixos da interface estáveis, como deveriam ser.
O cabeçalho tem 4em de altura por padrão. Substituí a variável --header-offset no CSS para Timeline, Sticky-avatar e a barra lateral por 4em para calcular sua posição:
.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 está lá porque tenho uma borda no meu cabeçalho, não relacionado)
Estou curioso sobre a função dessa variável, o cabeçalho nunca muda de altura, tanto quanto sei, exceto ao alterar o tamanho do texto, e usar em para sua altura cuida disso.
Não sei se há uma maneira de otimizar --header-offset no Safari mobile, mas minha solução alternativa corrige esse pequeno problema de desempenho. O Discourse parece muito mais polido quando os elementos fixos são realmente fixos ![]()
(Não tenho nenhum problema com esses elementos no Firefox ou Chrome no meu desktop, então pode ser um bug do Safari)