A tabela que arrastava a página inteira no celular

O sintoma

Uma cliente relatou algo estranho: ao arrastar o dedo da direita pra esquerda num artigo do meu blog, a página inteira, texto incluso, se movia junto. Não era zoom, era um arrasto puro, horizontal.

Testei no modo responsivo do Chrome DevTools (viewport 375px, user-agent Android, toque habilitado) e não achei nada. Varri todos os elementos da página com getBoundingClientRect() procurando algo que ultrapassasse a borda da tela. Zero resultados.

A pista que eu ignorei

A cliente insistiu que via o problema no celular real dela, e que o DevTools "engana". Ela tinha razão, mas o motivo não era a emulação em si.

Reproduzindo o teste com mais cuidado, percebi que o redimensionamento da janela não estava de fato mudando o window.innerWidth da aba: ficava preso na largura do desktop mesmo depois de eu confirmar visualmente que a janela tinha mudado de tamanho. Toda a minha varredura de responsividade tinha rodado em viewport desktop, achando "nada de errado" num teste que nunca foi mobile de verdade.

A causa real

Assim que forcei a largura via JavaScript direto no elemento, em vez de confiar no tamanho da janela, o problema apareceu: uma tabela de comparação dentro de um layout CSS Grid.

.art-body{display:grid;grid-template-columns:1fr 320px}

Por padrão, um item de grid não encolhe além do conteúdo mais largo que ele contém: é o comportamento conhecido como "grid blowout". A tabela, sem overflow-x nem wrapper, tinha uma largura mínima maior que a tela do celular. Isso não empurrava só a tabela: empurrava o item de grid inteiro, e com ele a página toda. Por isso o efeito era "tudo se move junto": não era um elemento solto vazando, era o container inteiro sendo redimensionado pelo próprio conteúdo.

A correção

Duas linhas de CSS, sem tocar em HTML:

.art-body>div{min-width:0}
.art-content{overflow-x:auto}

A primeira linha permite que o item do grid encolha de verdade. A segunda contém qualquer conteúdo que ainda seja mais largo que o espaço disponível dentro de um scroll local, em vez de deixar vazar pra página inteira.

A lição

Duas, na verdade:

1. CSS Grid não encolhe sozinho. Todo item de grid tem min-width: auto implícito, que trava no tamanho do conteúdo mais largo lá dentro: tabela, texto sem quebra, imagem com largura fixa. Se o layout pode receber conteúdo variável, min-width: 0 é quase sempre necessário.
2. Confiar cegamente na própria ferramenta de teste é meio caminho pro erro. Eu validei "funcionou" no redimensionamento da janela sem checar se o valor real tinha mudado de verdade. A cliente, testando no dispositivo dela, estava certa o tempo todo, e foi ela quem insistiu até eu achar a causa.

---

Nayara Martins, desenvolvedora de sistemas sob medida em Assis, SP. Mais em prospectia.space.