Éléments persistants et fixes dans les captures pleine page : détection, suppression et vérification

Un en-tête qui semble correct dans le navigateur peut apparaître six fois dans une capture d'écran pleine page. La page ne dupliquait pas l'en-tête ; le processus de capture a observé le même élément attaché à la fenêtre à six positions de défilement différentes. Le même effet peut affecter les bannières de cookies, les lanceurs de chat, les commandes vidéo, les indicateurs de progression et les boutons « retour en haut ».

Ce guide explique la distinction entre le contenu du document et l'interface attachée à la fenêtre, puis documente la stratégie actuelle de capture d'écran PDF 0.0.13. Il montre également comment vérifier le résultat sans prétendre qu'un seul sélecteur peut identifier chaque composant flottant sur le Web.

Pourquoi les en-têtes répétés se produisent

Les éléments avec CSS position: fixed sont positionnés par rapport à la fenêtre. Les éléments collants se comportent comme du contenu normal jusqu'à ce qu'ils atteignent un seuil, puis restent attachés pendant que leur conteneur défile. La référence position de MDN décrit ces comportements de mise en page.

Un outil pleine page qui capture une fenêtre après l'autre voit l'élément dans chaque tranche. Lorsque ces tranches sont assemblées à l'aide des coordonnées du document, l'élément répété devient partie intégrante de l'image à chaque limite. La conversion de fixed en absolute est tentante, mais un changement de positionnement peut déclencher une redistribution, modifier les points d'arrêt réactifs, chevaucher le contenu ou déplacer l'élément vers un emplacement sans rapport.

La capture d'écran PDF préserve la mise en page

L'extension enregistre la valeur visibility en ligne originale de chaque candidat. Il ne réécrit pas le positionnement de l'élément. Après la première tranche, les candidats sont masqués avec une règle de visibilité importante ; leur disposition occupée et les dimensions du contenu environnant restent stables. A la fin, la visibilité d'origine est restaurée.

La première tranche conserve délibérément l'en-tête et les autres interfaces visibles. Cela préserve le début de la page tel que l'utilisateur l'a vu tout en évitant les répétitions ultérieures. Si l'en-tête lui-même n'est pas pertinent ou contient des informations de compte privé, supprimez-le ou masquez-le avant la capture plutôt que de supposer que l'extension devrait le supprimer.

Comment les candidats flottants sont découverts

Il n’existe pas de classe universelle sticky-header. Screenshot PDF combine deux approches :

1. Il examine les éléments sémantiques probables et les modèles de classe ou d'identification tels que les en-têtes, la navigation, les pieds de page, les barres d'outils et les noms contenant fixed ou sticky.
2. Il échantillonne une grille de points cinq par cinq dans la fenêtre visible, inspecte jusqu'à huit couches visuelles à chaque point et parcourt plusieurs ancêtres pour trouver le positionnement calculé fixed ou sticky.

L'étape d'échantillonnage visuel capture les interfaces générées par le module CSS et l'exécution dont les noms de classe ne révèlent rien. Il s'exécute également à nouveau lors des tranches ultérieures, car certains sites créent des invites de connexion, des publicités ou des barres d'application uniquement après le défilement.

Il s'agit d'une heuristique limitée, pas d'une preuve. Un minuscule élément flottant en dehors des points échantillonnés, un composant à l'intérieur d'une racine d'ombre fermée ou une superposition créée au moment de la capture peuvent échapper à la détection. Le résultat nécessite encore une inspection.

Un test de vérification en cinq étapes

Utilisez le appareil de capture public ou créez une page non sensible avec un en-tête collant et un badge de coin fixe.

1. Enregistrez la version du navigateur, la version de l'extension, la fenêtre d'affichage, le zoom et le thème.
2. Capturez la page en mode pleine page.
3. Confirmez que l'en-tête apparaît une fois au début.
4. Inspectez chaque couture pour déceler des en-têtes répétés, du contenu manquant ou une nouvelle bande vierge.
5. Revenez à l'onglet source et confirmez que ses commandes sont à nouveau visibles et que la position de défilement est revenue vers le haut.

La cinquième étape est importante. Un résultat visuellement correct ne suffit pas si la page source reste modifiée après une exception.

Distinguer la duplication du chevauchement

Un en-tête répété a les mêmes pixels à intervalles réguliers dans la fenêtre. Un chevauchement montre généralement deux zones de contenu différentes occupant le même espace, souvent parce que la hauteur de la page a changé entre les captures. Les images à chargement tardif, les publicités étendues, les échanges de polices et les accordéons animés peuvent déplacer le contenu après qu'une tranche ait déjà été enregistrée.

Si le motif est identique et périodique, recherchez une interface fixe ou collante. Si le motif contient un contenu différent ou des décalages irréguliers, stabilisez la page : attendez le média, mettez l'animation en pause, fermez les panneaux en expansion et capturez des sections plus petites. Masquer un en-tête ne corrigera pas une mise en page qui change encore de hauteur.

Les contrôles de consentement et de chat nécessitent du jugement

Les contrôles de consentement des cookies peuvent faire partie de l'état que vous devez documenter. Une demande d'assistance concernant une bannière de consentement ne doit pas automatiquement la supprimer. À l’inverse, une bannière sans rapport avec le document peut masquer le contenu ou se répéter à chaque couture. Décidez de ce que la capture est censée prouver avant de rejeter quoi que ce soit.

Les lanceurs de discussion peuvent afficher les noms, les aperçus des messages ou le nombre de messages non lus. Fermez-les avant la capture lorsqu'ils ne sont pas liés. Si le sujet concerne le contenu du chat, utilisez une capture dédiée avec une rédaction appropriée et ne comptez pas sur la suppression automatique des éléments flottants pour préserver une conversation.

Modes de défaillance connus

• Un élément collant imbriqué dans un ancêtre transformé peut se comporter différemment d'un en-tête de page ordinaire.
• Les composants Shadow-DOM peuvent ne pas être accessibles par les sélecteurs de documents normaux.
• Un site peut recréer une superposition après que celle-ci ait été masquée.
• Un flux infini ne peut jamais exposer un point final stable.
• Les listes virtualisées peuvent supprimer le contenu hors écran quelle que soit la gestion des éléments flottants.
• Les cadres d'origine croisée conservent leur propre contexte de document et de mise en page.

Lorsqu'une limitation est importante, capturez des sections plus courtes qui se chevauchent, utilisez la vue d'impression de la page ou utilisez une exportation officielle. Enregistrez la solution de contournement plutôt que de présenter le résultat sous la forme d'un état pleine page intact.

Critères d'acceptation

Un résultat d'élément flottant réussi comporte un en-tête intentionnel, aucune barre d'outils répétée au niveau des coutures, aucun contenu déplacé dans l'espace de l'élément caché et une page source entièrement restaurée. Comparez le haut, le milieu et le bas à la taille réelle. Cette vérification est plus fiable que de juger une vignette compressée.

Les en-têtes répétés sont un problème de mise en page avec un mécanisme testable. Conservez la première instance significative, supprimez les copies ultérieures de la fenêtre sans redistribution, restaurez la page source et documentez tout ce que l'heuristique n'a pas pu décider en toute sécurité.