Chrome无头模式生成PDF时CSS transform异常问题咨询

针对你遇到的Chrome打印/无头PDF生成时scale变换错位问题，结合Chrome渲染引擎的特性，整理以下注意事项：

• 避免直接对包含复杂流式内容的容器使用scale变换：Chrome的打印渲染逻辑对应用了scale的动态内容容器（比如多行文本、嵌套组件）兼容性较差，容易出现重复计算缩放比例的情况，导致垂直或双向缩放异常。
• 优先用百分比尺寸替代scale变换：如果业务允许，把transform: scale(0.64)替换为直接设置容器的width: 64%，同时同步调整内部元素的font-size、padding、margin等属性到对应比例，这种基于盒模型的缩放更符合打印渲染的预期，稳定性远高于CSS变换。
• 给变换容器添加固定尺寸约束：如果必须保留scale变换，务必给应用变换的DIV设置缩放后的固定尺寸（比如原始宽1000px，缩放后设为width: 640px），同时保持transform-origin: 0px 0px的设置，避免Chrome渲染时因容器尺寸不确定产生偏移计算错误。
• 禁用无头模式的自动页面缩放：生成PDF时，在Chrome命令行参数中明确指定窗口尺寸和打印参数，比如：

  chrome --headless --print-to-pdf=output.pdf --print-to-pdf-no-header --no-margins --window-size=1920,1080 your-page.html
  

  确保窗口尺寸和页面原始尺寸匹配，避免和CSS的scale变换叠加导致重复缩放。
• 检查容器内的定位元素：如果变换容器内存在position: absolute或fixed的元素，Chrome打印时会错误计算其基于缩放后容器的定位坐标，建议将这类元素的定位基准切换到未应用变换的父容器，或者手动调整其top/left值到缩放后的对应数值。
• 启用打印渲染修复特性：启动Chrome无头模式时添加--enable-features=WebKitPrintingFixes参数，该参数可以修复部分Chrome打印时的CSS变换渲染bug。

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