フルページ キャプチャのスティッキー要素と固定要素: 検出、抑制、検証

ブラウザーでは正しく見えるヘッダーが、ページ全体のスクリーンショットに 6 回表示されることがあります。ページにはヘッダーが複製されていませんでした。キャプチャ プロセスでは、6 つの異なるスクロール位置で同じビューポートに接続された要素が観察されました。同じ効果が、Cookie バナー、チャット ランチャー、ビデオ コントロール、進行状況インジケーター、および「トップに戻る」ボタンにも影響する可能性があります。

このガイドでは、ドキュメントのコンテンツとビューポートに接続されたインターフェイスの区別について説明し、その後、現在のスクリーンショット PDF 0.0.13 戦略について文書化します。また、1 つのセレクターが Web 上のすべての浮動コンポーネントを識別できるかのように装うことなく、結果を検証する方法も示します。

ヘッダーの繰り返しが発生する理由

CSS position: fixed を持つ要素は、ビューポートを基準にして配置されます。スティッキー要素は、しきい値に達するまでは通常のコンテンツのように動作し、しきい値に達すると、コンテナーがスクロールしている間は接続されたままになります。 MDN の position リファレンスでは、これらのレイアウト動作について説明しています。

ビューポートを次々にキャプチャするフルページ ツールでは、すべてのスライス内の要素が表示されます。これらのスライスがドキュメント座標を使用してステッチされると、繰り返される要素が各境界で画像の一部になります。 fixed を absolute に変換するのは魅力的ですが、位置を変更すると、リフローがトリガーされたり、応答ブレークポイントが変更されたり、コンテンツが重なったり、要素が無関係な場所に移動したりする可能性があります。

スクリーンショット PDF はレイアウトを保持します

拡張機能は、各候補の元のインライン visibility 値を記録します。要素の位置は書き換えられません。最初のスライスの後、候補は重要な可視性ルールに従って非表示になります。占有されたレイアウトと周囲のコンテンツのサイズは安定したままになります。最後に、元の可視性が回復されます。

最初のスライスは、ヘッダーとその他の目に見えるインターフェイスを意図的に保持します。これにより、ユーザーが見たときのページの先頭が保存され、後で繰り返されることがなくなります。ヘッダー自体が無関係であるか、非公開のアカウント情報が含まれている場合は、拡張機能でヘッダーを削除する必要があると想定するのではなく、キャプチャする前にヘッダーを閉じるかマスクしてください。

浮動候補の発見方法

汎用の sticky-header クラスはありません。スクリーンショット PDF は、次の 2 つのアプローチを組み合わせたものです。

1. ヘッダー、ナビゲーション、フッター、ツールバー、fixed または sticky を含む名前など、可能性のあるセマンティック要素とクラスまたは ID パターンを検査します。
2. 表示されているビューポート全体で 5 行 5 列のグリッドのポイントをサンプリングし、各ポイントで最大 8 つのビジュアル レイヤーを検査し、いくつかの先祖をたどって、計算された fixed または sticky の位置を見つけます。

ビジュアル サンプリング ステップでは、クラス名からは何も明らかにされない CSS モジュールとランタイム生成インターフェイスを捕捉します。また、一部のサイトではスクロール後にのみログイン プロンプト、広告、またはアプリケーション バーが作成されるため、後のスライス中にも再度実行されます。

これは限界のあるヒューリスティックであり、証明ではありません。サンプリングされたポイントの外側にある小さな浮遊要素、閉じたシャドウ ルート内のコンポーネント、またはキャプチャの瞬間に作成されたオーバーレイは、検出を逃れる可能性があります。結果はまだ検査が必要です。

5段階の検証テスト

パブリック キャプチャ フィクスチャ を使用するか、1 つの固定ヘッダーと 1 つの固定コーナー バッジを含む非機密ページを作成します。

1. ブラウザのバージョン、拡張機能のバージョン、ビューポート、ズーム、テーマを記録します。
2. フルページ モードでページをキャプチャします。
3. ヘッダーが最初に 1 回表示されることを確認します。
4. ヘッダーの繰り返し、コンテンツの欠落、または新しい空白のバンドがないか、すべての継ぎ目を検査します。
5. ソース タブに戻り、そのコントロールが再び表示され、スクロール位置が先頭に戻っていることを確認します。

ステップ 5 が重要です。例外が発生した後もソース ページが変更されたままである場合、視覚的に正しい出力だけでは十分ではありません。

重複と重複を区別する

繰り返されるヘッダーには、一定のビューポート間隔で同じピクセルが含まれます。オーバーラップでは、通常、同じスペースを占める 2 つの異なるコンテンツ領域が表示されます。これは、多くの場合、キャプチャ間でページの高さが変更されたことが原因です。画像の読み込みの遅れ、広告の拡大、フォントの交換、アニメーション化されたアコーディオンにより、スライスがすでに記録された後にコンテンツが移動される可能性があります。

パターンが同一で周期的である場合は、固定インターフェイスまたはスティッキー インターフェイスを調査します。パターンに異なるコンテンツや不規則なオフセットが含まれている場合は、ページを安定させます。メディアを待ち、アニメーションを一時停止し、展開パネルを閉じ、小さなセクションをキャプチャします。ヘッダーを非表示にしても、高さが依然として変更されているレイアウトは修正されません。

同意とチャットの制御には判断が必要です

Cookie の同意コントロールは、文書化する必要がある状態の一部である場合があります。同意バナーに関するサポート ケースでは、同意バナーが自動的に削除されるべきではありません。逆に、ドキュメントに関係のないバナーがコンテンツを覆い隠したり、継ぎ目ごとに繰り返されたりする場合があります。何かを却下する前に、キャプチャが何を証明することを目的としているかを決定してください。

チャット ランチャーには、名前、メッセージのプレビュー、または未読数を表示できます。無関係な場合はキャプチャする前に閉じてください。チャット コンテンツが主題の場合は、適切な編集を行った専用のキャプチャを使用し、会話を保存するために自動浮動要素抑制に依存しないでください。

既知の故障モード

• 変換された祖先にネストされたスティッキー要素は、通常のページ ヘッダーとは異なる動作をする場合があります。
• Shadow-DOM コンポーネントには、通常のドキュメント セレクターではアクセスできない場合があります。
• サイトはオーバーレイを非表示にした後でも再作成できます。
• 無限フィードでは、安定した最終エンドポイントが公開されない可能性があります。
• 仮想化リストは、浮動要素の処理に関係なく、画面外のコンテンツを削除できます。
• クロスオリジン フレームは、独自のドキュメントとレイアウト コンテキストを維持します。

制限が重要な場合は、重複する短いセクションをキャプチャするか、ページの印刷ビューを使用するか、公式エクスポートを使用します。結果を未変更のページ全体の状態として表示するのではなく、回避策を記録します。

合格基準

浮動要素の結果が正常に完了すると、意図的なヘッダーが 1 つ含まれ、継ぎ目に繰り返されるツールバーがなく、非表示要素のスペースにコンテンツがシフトされず、ソース ページが完全に復元されます。上・中・下を実寸で比べてみてください。この検証は、圧縮されたサムネイルを判断するよりも信頼性が高くなります。

ヘッダーの繰り返しは、テスト可能なメカニズムのレイアウトの問題です。最初の意味のあるインスタンスを保持し、その後のビューポートのコピーをリフローせずに抑制し、ソース ページを復元し、ヒューリスティックで安全に判断できなかったものを文書化します。