Elementos sticky e fixos em capturas de página inteira: detecção, supressão e verificação

Um cabeçalho que parece correto no navegador pode aparecer seis vezes em uma captura de tela de página inteira. A página não duplicou o cabeçalho; o processo de captura observou o mesmo elemento anexado à janela de visualização em seis posições de rolagem diferentes. O mesmo efeito pode afetar banners de cookies, iniciadores de bate-papo, controles de vídeo, indicadores de progresso e botões “voltar ao topo”.

Este guia explica a distinção entre o conteúdo do documento e a interface anexada à janela de visualização e, em seguida, documenta a estratégia atual do Screenshot PDF 0.0.13. Também mostra como verificar o resultado sem fingir que um seletor pode identificar todos os componentes flutuantes na web.

Por que cabeçalhos repetidos acontecem

Elementos com CSS position: fixed são posicionados em relação à janela de visualização. Os elementos fixos se comportam como conteúdo normal até atingirem um limite e, em seguida, permanecem anexados enquanto o contêiner rola. A referência position do MDN descreve esses comportamentos de layout.

Uma ferramenta de página inteira que captura uma janela de visualização após a outra vê o elemento em cada fatia. Quando essas fatias são costuradas usando as coordenadas do documento, o elemento repetido torna-se parte da imagem em cada limite. Converter fixed em absolute é tentador, mas alterar o posicionamento pode acionar refluxo, alterar pontos de interrupção responsivos, sobrepor conteúdo ou mover o elemento para um local não relacionado.

Captura de tela PDF preserva o layout

A extensão registra o valor visibility embutido original de cada candidato. Não reescreve o posicionamento do elemento. Após a primeira fatia, os candidatos ficam ocultos com uma importante regra de visibilidade; seu layout ocupado e as dimensões do conteúdo circundante permanecem estáveis. No final, a visibilidade original é restaurada.

A primeira fatia retém deliberadamente o cabeçalho e outras interfaces visíveis. Isso preserva o início da página como o usuário a viu, evitando repetições posteriores. Se o cabeçalho em si for irrelevante ou contiver informações privadas da conta, descarte-o ou mascare-o antes da captura, em vez de presumir que a extensão deve removê-lo.

Como os candidatos flutuantes são descobertos

Não existe uma classe sticky-header universal. Captura de tela PDF combina duas abordagens:

1. Ele examina prováveis ​​elementos semânticos e padrões de classe ou ID, como cabeçalhos, navegação, rodapés, barras de ferramentas e nomes contendo fixed ou sticky.
2. Ele amostra uma grade de cinco por cinco pontos na janela de visualização visível, inspeciona até oito camadas visuais em cada ponto e percorre vários ancestrais para encontrar o posicionamento fixed ou sticky computado.

A etapa de amostragem visual captura módulos CSS e interfaces geradas em tempo de execução cujos nomes de classe não revelam nada. Ele também é executado novamente durante fatias posteriores porque alguns sites criam prompts de login, anúncios ou barras de aplicativos somente após a rolagem.

Esta é uma heurística limitada, não uma prova. Um pequeno elemento flutuante fora dos pontos amostrados, um componente dentro de uma raiz de sombra fechada ou uma sobreposição criada durante o instante da captura pode escapar da detecção. O resultado ainda requer inspeção.

Um teste de verificação em cinco etapas

Use o dispositivo de captura pública ou crie uma página não confidencial com um cabeçalho fixo e um emblema de canto fixo.

1. Registre a versão do navegador, versão da extensão, janela de visualização, zoom e tema.
2. Capture a página no modo de página inteira.
3. Confirme se o cabeçalho aparece uma vez no início.
4. Inspecione cada costura em busca de cabeçalhos repetidos, conteúdo ausente ou uma nova faixa em branco.
5. Retorne à guia de origem e confirme se seus controles estão visíveis novamente e se a posição de rolagem voltou ao topo.

O quinto passo é importante. Uma saída visualmente correta não é suficiente se a página de origem permanecer modificada após uma exceção.

Distinguir duplicação de sobreposição

Um cabeçalho repetido possui os mesmos pixels em intervalos regulares da janela de visualização. Uma sobreposição geralmente mostra duas regiões de conteúdo diferentes ocupando o mesmo espaço, geralmente porque a altura da página muda entre as capturas. Imagens de carregamento tardio, anúncios expansíveis, trocas de fontes e acordeões animados podem mover o conteúdo depois que uma fatia já tiver sido gravada.

Se o padrão for idêntico e periódico, investigue a interface fixa ou pegajosa. Se o padrão contiver conteúdo diferente ou deslocamentos irregulares, estabilize a página: aguarde a mídia, pause a animação, feche os painéis de expansão e capture seções menores. Ocultar um cabeçalho não corrigirá um layout que ainda esteja mudando de altura.

Os controles de consentimento e bate-papo exigem julgamento

Os controles de consentimento de cookies podem fazer parte do estado que você precisa documentar. Um caso de suporte sobre um banner de consentimento não deve removê-lo automaticamente. Por outro lado, um banner não relacionado ao documento pode obscurecer o conteúdo ou repetir-se em todas as costuras. Decida o que a captura pretende provar antes de descartar qualquer coisa.

Os iniciadores de bate-papo podem exibir nomes, visualizações de mensagens ou contagens de mensagens não lidas. Feche-os antes da captura quando não estiverem relacionados. Se o conteúdo do bate-papo for o assunto, use uma captura dedicada com redação apropriada e não confie na supressão automática de elementos flutuantes para preservar uma conversa.

Modos de falha conhecidos

• Um elemento fixo aninhado em um ancestral transformado pode se comportar de maneira diferente de um cabeçalho de página comum.
• Os componentes Shadow-DOM podem não ser acessíveis por seletores de documentos normais.
• Um site pode recriar uma sobreposição depois de ocultada.
• Um feed infinito nunca poderá expor um endpoint final estável.
• Listas virtualizadas podem remover conteúdo fora da tela, independentemente do manuseio de elementos flutuantes.
• Os quadros de origem cruzada mantêm seu próprio contexto de documento e layout.

Quando uma limitação for importante, capture seções mais curtas sobrepostas, use a visualização de impressão da página ou use uma exportação oficial. Registre a solução alternativa em vez de apresentar o resultado como um estado de página inteira intacto.

Critérios de aceitação

Um resultado de elemento flutuante bem-sucedido tem um cabeçalho intencional, nenhuma barra de ferramentas repetida, nenhum conteúdo deslocado para o espaço do elemento oculto e uma página de origem totalmente restaurada. Compare a parte superior, intermediária e inferior em tamanho real. Esta verificação é mais confiável do que julgar uma miniatura compactada.

Cabeçalhos repetidos são um problema de layout com um mecanismo testável. Preserve a primeira instância significativa, suprima cópias posteriores da janela de visualização sem refluxo, restaure a página de origem e documente tudo o que a heurística não conseguiu decidir com segurança.