我正在使用 Chrome headless 生成 PDF：一切正常，直到某些 DIV 包含以下 CSS 转换：
transform-origin: 0px 0px;
transform: scale(0.64);
从视觉上看，浏览器中的一切看起来都不错：DIV 的内容已正确缩小，但在生成（Chrome 无头）PDF 时（甚至使用浏览器打印功能进行打印时），某些 DIV 的放置和缩放错误：并非全部其中，这取决于 DIV 的实际内容。有时，DIV 似乎再次垂直缩放，有时 X 轴和 Y 轴都缩小了......
我知道在没有看到页面本身的情况下很难回复 - 我仍在努力生成一个非常小的页面来重现该问题 - 但是在使用这些 CSS 转换和生成 PDF 时我应该注意什么？
注意：在 Firefox 中打印时，同一页面没问题，但我需要使用 Chrome 来获得无头支持。
当您在生成 PDF 时遇到 Chrome 的无头模式问题时，尤其是在使用缩放等 CSS 转换时，请务必考虑一些可能导致问题的因素：
渲染引擎差异：
Chrome 和 Firefox 使用不同的渲染引擎。 Chrome 使用 Blink，而 Firefox 使用 Gecko。渲染引擎的差异可能会导致 CSS 变换的应用和渲染方式发生变化。
CSS 变换起源： 变换原点属性指定应用变换的原点。它可以影响元素的缩放或旋转方式。确保为相关元素设置一致的transform-origin 属性。在你的情况下，transform-origin: 0px 0px;表示元素的左上角为原点。
CSS 变换矩阵： CSS 变换：缩放有效地对元素应用 2D 缩放变换。确保没有其他 CSS 规则或内联样式干扰转换。多次转变的累积效应可能会带来意想不到的结果。
嵌套元素： 如果缩放元素中存在具有自己的变换的嵌套元素，则可以复合缩放效果。确保嵌套元素得到正确处理，并且它们的转换不会与父元素的缩放发生冲突。
Headless Chrome 中的渲染选项： Chrome 的无头模式可能无法像常规浏览器一样处理某些渲染选项。您可以尝试使用 --disable-gpu 标志进行试验，这可能会影响渲染中 GPU 加速的使用方式。但是，这可能会影响性能。
PDF 生成选项： 使用无头 Chrome 生成 PDF 时，您可以探索其他选项和标志来自定义渲染过程。例如，您可以尝试使用 --print-to-pdf 标志，或使用 --print-to-pdf-no-header 标志设置纸张尺寸和边距。调整这些选项可能有助于解决缩放和定位问题。
使用 DevTools 进行调试： 您可以在无头模式下使用 Chrome 的 DevTools 来检查页面渲染。这可以帮助您识别渲染过程中的任何异常情况。您可以使用 --remote-debugging-port 标志来打开调试会话。
版本兼容性： 确保您使用的是最新版本的 Chrome 以及您正在使用的库或框架。有时，此类问题可能与特定的浏览器版本或库错误有关。 简化再现：
正如您所提到的，创建一个重现问题的小型测试页面很有价值。这可以帮助您隔离问题，并可能识别触发问题的任何特定元素或 CSS 属性。 鉴于该问题在 Firefox 中不存在，而是 Chrome 特有，因此可能与 Chrome 在无头模式下处理 CSS 转换的方式有关。尝试上述因素和 Chrome 标志可以帮助您找到解决方法或解决方案。