Problema com avatares fixos

Suporte
1

Temos um tema personalizado, e o cabeçalho encolhe conforme rolamos. Achamos que o recurso de avatares fixos, integrado recentemente, está causando algum comportamento de “thrashing” (oscilação/travamento) justamente quando o cabeçalho encolhe. Veja o vídeo anexo:

Tentei desabilitar os avatares fixos usando o CSS que encontrei em https://meta.discourse.org/t/sticky-avatars-posts-avatars-following-scroll:

.topic-post.sticky-avatar {
    .topic-avatar {
        position: relative !important;
        top: unset !important; /* Pode ser necessário em alguns casos */
    }
}

Isso esconde o avatar fixo, mas não parece ajudar com o “thrashing”. Há algo mais que eu deveria fazer para fazer isso funcionar ou desabilitar o recurso completamente?

Não tenho 100% de certeza de que seja a alteração dos avatares fixos - então, por favor, comente se você acha que pode ser outra coisa.

Um repro está em Google launches Chromebook self-repair programme for schools - Right to repair: policy & activism - The Restarters Community. O Chrome é o melhor para reproduzir - o Firefox parece suprimir o erro após a primeira ocorrência.

2

Acho que o problema não está relacionado a avatares fixos.

Quando o cabeçalho encolhe, a página fica mais curta e a posição de rolagem da página muda. Então, o que acontece é que você obtém essa cintilação à medida que a página entra e sai da posição onde o cabeçalho deveria encolher.

Se eu exibir a posição de rolagem da página no console do meu navegador, você poderá ver isso em ação… o cabeçalho está encolhendo em cerca de 60px, e isso se reflete na posição de rolagem enquanto ela cintila:

Screen Shot 2022-02-21 at 10.59.45 AM
Screen Shot 2022-02-21 at 10.59.45 AM498×532 11.6 KB

Para resolver isso em JS, acho que você poderia adicionar a diferença de altura à posição de rolagem ao mesmo tempo em que a transição do cabeçalho acontece?

Outra maneira de corrigir isso usando apenas CSS seria:

.d-header-wrap {
  // isso faz com que a posição do cabeçalho seja fixa, para que não faça parte da altura da página
  position: fixed;
  width: 100%;
}

#main-outlet {
  // isso compensa o conteúdo da página pela altura do cabeçalho grande
  // necessário porque a posição fixa coloca o cabeçalho sobre o conteúdo
  padding-top: 150px !important;
}
3

Muito obrigado, esse CSS realmente corrige o problema. Muito gentil da sua parte.