全页截图中的粘性与固定元素：检测、抑制和验证
在浏览器中看起来正确的标题可以在全页屏幕截图中出现六次。页面没有重复标题；捕获过程在六个不同的滚动位置观察到相同的视口附加元素。同样的效果也会影响 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 组件。
- 站点可以在隐藏后重新创建叠加层。
- 无限馈送可能永远不会暴露稳定的最终端点。
- 虚拟列表可以删除屏幕外的内容，无论浮动元素处理如何。
- 跨源框架维护自己的文档和布局上下文。
当限制很重要时，捕获较短的重叠部分、使用页面的打印视图或使用官方导出。记录解决方法，而不是将结果呈现为未更改的整页状态。
验收标准
成功的浮动元素结果具有一个有意的标题、接缝处没有重复的工具栏、没有内容移入隐藏元素的空间以及完全恢复的源页面。比较顶部、中间和底部的实际尺寸。这种验证比判断压缩缩略图更可靠。
重复的标题是一个具有可测试机制的布局问题。保留第一个有意义的实例，在不回流的情况下抑制后来的视口副本，恢复源页面，并记录启发式无法安全决定的任何内容。