--header-offset é lento no Safari com elementos fixos (iPadOS 15.6)

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 :slight_smile:

(Não tenho nenhum problema com esses elementos no Firefox ou Chrome no meu desktop, então pode ser um bug do Safari)

1 curtida

Isso tende a estar relacionado a temas personalizados, mas como você observou, também há casos como o tamanho da fonte que podem afetar a altura do cabeçalho. Nos casos em que o cabeçalho é mais alto ou mais baixo que o padrão, calculamos o deslocamento do cabeçalho em JS para ajustar outros elementos na página para que eles não caiam sob o cabeçalho.

De qualquer forma, consigo ver o problema, isso é definitivamente chocante:

mas se eu definir --header-offset para um valor estático em CSS:

Talvez estejamos calculando e atualizando o deslocamento com muita frequência? Faremos algumas investigações… O Safari no iOS faz muitas otimizações que podem estar causando problemas.

4 curtidas

Acabei de adicionar uma correção para isso: FIX: Calculate header offset once on load by pmusaraj · Pull Request #18669 · discourse/discourse · GitHub

Por favor, tente e me diga se isso resolve seus problemas, @vincefrommtl.

7 curtidas

Isso funcionou perfeitamente, muito obrigado :slight_smile:

2 curtidas

Este tópico foi automaticamente fechado após 4 dias. Novas respostas não são mais permitidas.