Chrome打印预览中渲染页面出现随机裁剪问题的技术咨询

• 打印场景CSS适配缺失：两个站点虽然返回相同的证书数据，issuer-icef.netlify.app站点的@media print样式块大概率存在规则冲突，或是没有适配打印场景的全局viewport规则。如果证书容器用了固定像素宽高、绝对定位但未针对打印做100%宽高适配，切换横竖屏时浏览器重新计算布局就会偶发触发尺寸计算错误，导致内容仅左上角渲染、其余区域空白。可以对比两个站点的打印样式规则，给netlify站点的证书容器在打印样式下补充width: 100vw !important; height: 100vh !important; margin: 0; padding: 0; box-sizing: border-box规则验证。
• 资源加载时序异常：netlify站点的静态资源（证书背景、字体、渲染所需的JS）可能没有配置预加载逻辑，触发打印按钮时部分资源还未加载完成就进入了打印预览流程，就会出现偶发的内容截断。而certificates-icef.nextid.com站点大概率做了资源预加载校验，只有所有渲染资源加载完成后才允许触发打印逻辑，不会出现该问题。可以修改netlify站点的打印触发逻辑，增加资源加载完成的校验，或者在window.print()执行前增加100-200ms的延迟验证是否复现。
• 部署侧规则差异：Netlify默认开启的静态资源压缩、边缘缓存规则可能对页面的打印相关JS/CSS做了异常处理，比如压缩时剔除了部分打印适配的CSS规则，或是边缘节点返回了旧版本的样式资源，导致布局计算错误。而nextid的自有部署服务没有这类默认压缩规则，样式和JS逻辑都可以正常执行。可以在Netlify控制台关闭对应站点的CSS/JS自动压缩功能，清除边缘缓存后重新验证。
• 浏览器缓存冲突：netlify站点的响应头如果没有配置正确的缓存校验规则，浏览器可能会调用旧版本的布局缓存用于打印渲染，切换横竖屏时新旧样式规则冲突导致渲染异常。可以给netlify站点的证书页面添加Cache-Control: no-cache响应头，强制浏览器每次请求都拉取最新的页面资源验证。

内容的提问来源于stack exchange，提问作者wmclaxton