Sticky- und fixe Elemente in Ganzseitenaufnahmen: Erkennung, Unterdrückung und Prüfung

Ein Header, der im Browser korrekt aussieht, kann in einem ganzseitigen Screenshot sechsmal vorkommen. Die Seite hat die Kopfzeile nicht dupliziert; Beim Erfassungsprozess wurde dasselbe an das Ansichtsfenster angeschlossene Element an sechs verschiedenen Bildlaufpositionen beobachtet. Der gleiche Effekt kann sich auf Cookie-Banner, Chat-Starter, Videosteuerungen, Fortschrittsanzeigen und „Zurück zum Anfang“-Schaltflächen auswirken.

In diesem Leitfaden wird der Unterschied zwischen Dokumentinhalten und einer an das Ansichtsfenster angeschlossenen Schnittstelle erläutert und anschließend die aktuelle Strategie für Screenshot PDF 0.0.13 dokumentiert. Außerdem wird gezeigt, wie das Ergebnis überprüft werden kann, ohne so zu tun, als ob ein Selektor jede schwebende Komponente im Web identifizieren kann.

Warum wiederholte Header passieren

Elemente mit CSS position: fixed werden relativ zum Ansichtsfenster positioniert. Sticky-Elemente verhalten sich wie normale Inhalte, bis sie einen Schwellenwert erreichen, und bleiben dann angehängt, während ihr Container scrollt. Die MDN-Referenz position beschreibt dieses Layoutverhalten.

Ein ganzseitiges Tool, das ein Ansichtsfenster nach dem anderen erfasst, sieht das Element in jedem Slice. Wenn diese Slices mithilfe von Dokumentkoordinaten zusammengefügt werden, wird das wiederholte Element an jeder Grenze Teil des Bildes. Das Konvertieren von fixed in absolute ist verlockend, aber eine Änderung der Positionierung kann einen Reflow auslösen, reaktionsfähige Haltepunkte ändern, Inhalte überlappen oder das Element an eine nicht verwandte Position verschieben.

Screenshot-PDF behält das Layout bei

Die Erweiterung zeichnet den ursprünglichen Inline-visibility-Wert jedes Kandidaten auf. Die Positionierung des Elements wird nicht neu geschrieben. Nach dem ersten Slice werden Kandidaten mit einer wichtigen Sichtbarkeitsregel ausgeblendet; Ihr belegtes Layout und die Dimensionen der umgebenden Inhalte bleiben stabil. Am Ende wird die ursprüngliche Sichtbarkeit wiederhergestellt.

Das erste Slice behält bewusst den Header und andere sichtbare Schnittstellen bei. Dadurch bleibt der Anfang der Seite so erhalten, wie der Benutzer sie gesehen hat, und spätere Wiederholungen werden vermieden. Wenn der Header selbst irrelevant ist oder private Kontoinformationen enthält, verwerfen oder maskieren Sie ihn vor der Erfassung, anstatt davon auszugehen, dass die Erweiterung ihn entfernen sollte.

Wie schwebende Kandidaten entdeckt werden

Es gibt keine universelle sticky-header-Klasse. Screenshot PDF kombiniert zwei Ansätze:

1. Es untersucht wahrscheinliche semantische Elemente und Klassen- oder ID-Muster wie Kopfzeilen, Navigation, Fußzeilen, Symbolleisten und Namen, die fixed oder sticky enthalten.
2. Es tastet ein Fünf-mal-Fünf-Punktraster im sichtbaren Ansichtsfenster ab, prüft bis zu acht visuelle Ebenen an jedem Punkt und durchläuft mehrere Vorfahren, um die berechnete fixed- oder sticky-Positionierung zu finden.

Der visuelle Sampling-Schritt erfasst CSS-Module und zur Laufzeit generierte Schnittstellen, deren Klassennamen nichts verraten. Es wird auch in späteren Slices erneut ausgeführt, da einige Websites erst nach dem Scrollen Anmeldeaufforderungen, Anzeigen oder Anwendungsleisten erstellen.

Dies ist eine begrenzte Heuristik, kein Beweis. Ein winziges schwebendes Element außerhalb der abgetasteten Punkte, eine Komponente innerhalb einer geschlossenen Schattenwurzel oder eine während der Erfassung erstellte Überlagerung kann der Erkennung entgehen. Das Ergebnis bedarf noch einer Prüfung.

Ein fünfstufiger Verifizierungstest

Verwenden Sie das öffentliche Capture-Fixture oder erstellen Sie eine nicht sensible Seite mit einem Sticky-Header und einem festen Eck-Badge.

1. Zeichnen Sie Browserversion, Erweiterungsversion, Ansichtsfenster, Zoom und Design auf.
2. Erfassen Sie die Seite im Ganzseitenmodus.
3. Bestätigen Sie, dass die Kopfzeile einmal am Anfang erscheint.
4. Überprüfen Sie jede Naht auf wiederholte Überschriften, fehlenden Inhalt oder ein neues leeres Band.
5. Kehren Sie zur Registerkarte „Quelle“ zurück und vergewissern Sie sich, dass die Steuerelemente wieder sichtbar sind und die Bildlaufposition wieder oben ist.

Schritt fünf ist wichtig. Eine optisch korrekte Ausgabe reicht nicht aus, wenn die Quellseite nach einer Ausnahme geändert bleibt.

Unterscheiden Sie Duplikate von Überlappungen

Ein wiederholter Header hat in regelmäßigen Viewport-Intervallen die gleichen Pixel. Bei einer Überlappung nehmen in der Regel zwei unterschiedliche Inhaltsbereiche denselben Platz ein, häufig weil sich die Seitenhöhe zwischen den Aufnahmen geändert hat. Durch spätes Laden von Bildern, expandierende Werbung, Schriftartwechsel und animierte Akkordeons kann es zu einer Verschiebung von Inhalten kommen, nachdem bereits ein Slice aufgezeichnet wurde.

Wenn das Muster identisch und periodisch ist, untersuchen Sie die feste oder klebrige Schnittstelle. Wenn das Muster unterschiedliche Inhalte oder unregelmäßige Versätze enthält, stabilisieren Sie die Seite: Warten Sie auf Medien, halten Sie die Animation an, schließen Sie expandierende Bereiche und erfassen Sie kleinere Abschnitte. Durch das Ausblenden einer Kopfzeile wird ein Layout, dessen Höhe sich noch ändert, nicht korrigiert.

Einwilligungs- und Chatkontrollen erfordern Urteilsvermögen

Cookie-Zustimmungskontrollen können Teil des Status sein, den Sie dokumentieren müssen. Ein Supportfall zu einem Einwilligungsbanner sollte dieses nicht automatisch entfernen. Umgekehrt kann ein Banner, der nichts mit dem Dokument zu tun hat, den Inhalt verdecken oder sich an jeder Naht wiederholen. Entscheiden Sie, was mit der Festnahme bewiesen werden soll, bevor Sie etwas abtun.

Chat-Starter können Namen, Nachrichtenvorschauen oder die Anzahl der ungelesenen Nachrichten anzeigen. Schließen Sie sie vor der Erfassung, wenn sie nichts miteinander zu tun haben. Wenn Chat-Inhalt das Thema ist, verwenden Sie eine dedizierte Aufnahme mit entsprechender Schwärzung und verlassen Sie sich nicht auf die automatische Unterdrückung schwebender Elemente, um eine Konversation aufrechtzuerhalten.

Bekannte Fehlermodi

• Ein in einem transformierten Vorfahren verschachteltes Sticky-Element verhält sich möglicherweise anders als ein gewöhnlicher Seitenkopf.
• Shadow-DOM-Komponenten sind möglicherweise für normale Dokumentselektoren nicht erreichbar. – Eine Site kann ein Overlay neu erstellen, nachdem es ausgeblendet wurde. – Ein unendlicher Feed stellt möglicherweise niemals einen stabilen endgültigen Endpunkt bereit. – Virtualisierte Listen können Off-Screen-Inhalte unabhängig von der Handhabung schwebender Elemente entfernen.
• Cross-Origin-Frames behalten ihren eigenen Dokument- und Layoutkontext bei.

Wenn eine Einschränkung wichtig ist, erfassen Sie kürzere überlappende Abschnitte, verwenden Sie die Druckansicht der Seite oder verwenden Sie einen offiziellen Export. Zeichnen Sie die Problemumgehung auf, anstatt das Ergebnis als unberührten Ganzseitenzustand darzustellen.

Akzeptanzkriterien

Ein erfolgreiches Floating-Element-Ergebnis hat eine absichtliche Kopfzeile, keine sich wiederholenden Symbolleisten an den Nähten, keinen in den Bereich des ausgeblendeten Elements verschobenen Inhalt und eine vollständig wiederhergestellte Quellseite. Vergleichen Sie die Ober-, Mittel- und Unterseite in Originalgröße. Diese Überprüfung ist zuverlässiger als die Beurteilung eines komprimierten Miniaturbilds.

Wiederholte Header stellen bei einem testbaren Mechanismus ein Layoutproblem dar. Behalten Sie die erste sinnvolle Instanz bei, unterdrücken Sie spätere Ansichtsfensterkopien ohne Reflow, stellen Sie die Quellseite wieder her und dokumentieren Sie alles, was die Heuristik nicht sicher entscheiden konnte.