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:
.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.
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:
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;
}
