全頁截圖中的黏性與固定元素：偵測、抑制和驗證
在瀏覽器中看起來正確的標題可以在全頁螢幕截圖中出現六次。頁面沒有重複標題；捕獲過程在六個不同的滾動位置觀察到相同的視口附加元素。同樣的效果也會影響 cookie 橫幅、聊天啟動器、視訊控制、進度指示器和「回到頂部」按鈕。
本指南解釋了文件內容和視窗附加介面之間的區別，然後記錄了當前的螢幕截圖 PDF 0.0.13 策略。它還展示瞭如何驗證結果，而不假裝一個選擇器可以識別網路上的每個浮動組件。
為什麼會出現重複的標題
CSS position: fixed 的元素相對於視窗定位。黏性元素的行為與普通內容類似，直到達到閾值，然後在其容器滾動時保持附加狀態。 MDN 的 position 參考文獻描述了這些佈局行為。
一種全頁工具，可捕獲一個又一個視口，並在每個切片中看到元素。當使用文件座標縫合這些切片時，重複的元素將成為每個邊界處影像的一部分。將 fixed 轉換為 absolute 很誘人，但更改位置可能會觸發回流、更改響應斷點、重疊內容或將元素移動到不相關的位置。
Screenshot PDF 如何保留頁面版面
此擴充記錄每個候選者的原始內聯 visibility 值。它不會重寫元素的定位。在第一個切片之後，候選者將被隱藏，並遵循重要的可見性規則；它們的佔用佈局和周圍內容的尺寸保持穩定。最後，恢復原來的可見性。
第一個切片故意保留標題和其他可見介面。這會保留使用者看到的頁面開頭，同時避免以後重複。如果標頭本身不相關或包含私人帳戶訊息，請在捕獲之前將其忽略或屏蔽，而不是假設擴展程序應將其刪除。
如何識別浮動候選元素
沒有通用的 sticky-header 類別。螢幕截圖 PDF 結合了兩種方法：
- 它檢查可能的語義元素和類別或 ID 模式，例如標題、導航、頁腳、工具列以及包含
fixed或sticky的名稱。 - 它對可見視口中的 5×5 點網格進行採樣，在每個點檢查最多 8 個視覺層，並遍歷多個祖先以查找計算出的
fixed或sticky定位。
視覺採樣步驟捕獲 CSS 模組和運行時產生的接口，其類別名稱不顯示任何內容。它還會在後面的切片中再次運行，因為某些網站僅在滾動後才建立登入提示、廣告或應用程式欄。
這是有界啟發式，而不是證明。採樣點外部的微小浮動元素、閉合陰影根內部的組件或捕獲瞬間創建的覆蓋層可能會逃脫偵測。結果還需要檢驗。
五步驟驗證測試
使用公共擷取裝置，或建立一個帶有一個黏性標題和一個固定角徽章的非敏感頁面。
- 記錄瀏覽器版本、擴充版本、視窗、縮放和主題。
- 以全頁模式擷取頁面。
- 確認標題在開頭出現一次。
- 檢查每個接縫是否有重複的標題、缺少的內容或新的空白帶。
- 傳回來源標籤並確認其控制項再次可見且捲動位置已回到頂部。
第五步很重要。如果來源頁面在異常後仍然被修改，那麼視覺上正確的輸出是不夠的。
區分重複和重疊
重複的標題在規則的視窗間隔內具有相同的像素。重疊通常顯示兩個不同的內容區域佔據相同的空間，通常是因為頁面高度在捕獲之間發生了變化。後期載入圖像、擴展廣告、字體交換和動畫手風琴可以在錄製切片後移動內容。
如果圖案相同且週期性，請研究固定或黏性介面。如果圖案包含不同的內容或不規則的偏移，請穩定頁面：等待媒體、暫停動畫、關閉擴充面板並捕捉較小的部分。隱藏標題不會修復仍在改變高度的佈局。
同意和聊天控制需要判斷
Cookie 同意控制可能是您需要記錄的狀態的一部分。有關同意橫幅的支援案例不應自動將其刪除。相反，與文件無關的橫幅可能會掩蓋內容或在每個接縫處重複。在駁回任何事情之前，先確定捕獲的目的是為了證明什麼。
聊天啟動器可以顯示姓名、訊息預覽或未讀計數。當它們不相關時，在捕獲之前關閉它們。如果聊天內容是主題，請使用具有適當編輯的專用捕獲，並且不要依賴自動浮動元素抑制來保留對話。
已知的故障模式
- 嵌套在轉換後的祖先中的黏性元素的行為可能與普通頁首不同。
- 普通文件選擇器可能無法存取 Shadow-DOM 元件。
- 網站可以在隱藏後重新建立疊加層。
- 無限饋送可能永遠不會暴露穩定的最終端點。
- 虛擬清單可以刪除螢幕外的內容，無論浮動元素處理如何。
- 跨來源框架維護自己的文件和佈局上下文。
當限制很重要時，捕獲較短的重疊部分、使用頁面的列印視圖或使用官方匯出。記錄解決方法，而不是將結果呈現為未變更的整頁狀態。
驗收標準
成功的浮動元素結果具有一個有意的標題、接縫處沒有重複的工具列、沒有內容移入隱藏元素的空間以及完全恢復的來源頁面。比較頂部、中間和底部的實際尺寸。這種驗證比判斷壓縮縮圖更可靠。
重複的標題是一個具有可測試機制的佈局問題。保留第一個有意義的實例，在不回流的情況下抑制後來的視窗副本，恢復來源頁面，並記錄啟發式無法安全決定的任何內容。