Eu fiz certo... Mas por que quebra? - Scroll inteligente e os bastidores da frustração moderna
🧭 Esta é a edição #13 da minha newsletter Logbook for Devs.
Se curtir, assina lá pra acompanhar as próximas :)
Sabe aquele tipo de bug que aparece mesmo quando você faz tudo certo?
Essa semana, caí de novo nessa armadilha e, sinceramente, ela tem muito a dizer sobre o lado menos glamouroso do front-end avançado.
Eu estava implementando um modal com steps. A ideia era simples: cabeçalho fixo, rodapé fixo e conteúdo do meio scrollando. A receita estava na mão: display: flex, flexDirection: column, minHeight: 0, overflowY: auto… Tudo como manda o figurino.
Funcionou. Ou melhor: quase.
Numa das abas do modal, renderizei uma tabela com checkboxes. E foi aí que o Chrome e o Edge decidiram me lembrar quem manda: ao marcar uma linha, o conteúdo pulava pra cima do nada, criando um vácuo visual na tela.
A solução veio com dois ingredientes obscuros:
overflow-anchor: none;
contain: layout;
Essas propriedades foram como remédios pra um sintoma que eu nem sabia nomear: o scroll anchoring automático tentando “ajudar”, mas causando caos.
🧩 O que realmente aconteceu?
O bug estava ligado ao scroll anchoring, uma feature nativa dos navegadores modernos (implementada principalmente em Chromium) que tenta preservar a posição de rolagem automaticamente quando o DOM muda. A intenção é boa, por exemplo, manter o ponto de leitura visível enquanto elementos carregam acima, mas em alguns contextos dinâmicos, ela faz justamente o oposto do que deveria.
No meu caso, marcar uma checkbox dentro da tabela fazia o DOM mudar de forma sutil. Isso era suficiente pro Chrome “achar” que precisava reajustar a âncora de scroll, e o conteúdo acabava pulando, gerando um espaço em branco nada sutil.
Foi aí que entrou o overflow-anchor: none. Essa propriedade diz pro navegador: “não tente manter o scroll ancorado aqui”. Ela é essencial em contextos de UI interativa onde mudanças visuais não devem impactar a posição da rolagem.
Junto a isso, o contain: layout atuou como reforço: ele informa ao navegador que aquele container tem um layout isolado, ou seja, mudanças dentro dele não devem interferir no layout fora dele (nem vice-versa). Isso ajuda a limitar reflows, melhora performance, e neste caso específico, impediu efeitos colaterais inesperados de render.
📌 Curiosidade extra: o bug não aconteceu no Firefox porque ele trata scroll anchoring de forma mais contida. E se eu removesse o overflowY globalmente? O bug sumia, mas junto dele, a usabilidade esperada do scroll. Não era uma opção viável.
E aí bateu aquela reflexão inevitável:
No front, saber a solução ideal não basta. Você também precisa conhecer os efeitos colaterais, até os que só aparecem quando o navegador resolve ser criativo.
O conhecimento técnico é só uma parte da equação. O resto vem de vivência, tropeço e uma dose de humildade pra aceitar que “best practice” não significa “inabalável”.
🌊 Marés da semana
- Lembra da técnica de estudar conectando novos conhecimentos com os antigos? Pois é, esse pode ser o caminho pra resolver as famosas alucinações das LLMs. Pesquisadores estão apostando nas conexões neurosimbólicas como resposta.
- Rodar LLMs no celular? A Google lançou um app que permite baixar e executar modelos da Hugging Face localmente no Android, incluindo análise de imagem, chat e playground de prompts. Veja aqui o repositório oficial.
- E pra quem está de olho em geração de vídeos por IA: o Sora, da OpenAI, agora pode ser testado gratuitamente através do app móvel do Bing. Ainda não é o Flow da Google, mas entrega resultados impressionantes. Veja o anúncio.