提问人：Marc Polizzi 提问时间：11/8/2023 最后编辑：Marc Polizzi 更新时间：11/8/2023 访问量：35
Chrome Print、PDF 和 CSS 转换损坏
Chrome Print PDF and CSS transform broken
问：
我正在使用 Chrome headless 生成 PDF ：一切正常，直到某些 DIV 包含以下 CSS 转换：
transform-origin: 0px 0px;
transform: scale(0.64);
从视觉上看，浏览器中的所有内容看起来都不错：DIV 的内容被适当地缩小了，但是在生成（Chrome Headless）PDF 时（甚至在使用浏览器打印功能打印时），一些 DIV 的位置和缩放是错误的：不是全部，这取决于 DIV 的实际内容。有时，DIV 似乎再次垂直缩放，有时 X 轴和 Y 轴都按比例缩小......
我知道在不看到页面本身的情况下很难回复 - 我仍在努力生成一个非常小的页面来重现该问题 - 但是在使用这些 CSS 转换和生成 PDF 时我应该注意什么吗？
注意：在Firefox中打印时，同一页面很好，但我需要使用Chrome来支持其无头。
答：
0赞
Ihar Sivak
11/8/2023
#1
当您在生成 PDF 时遇到 Chrome 的无头模式问题时，尤其是在使用 CSS 转换（如缩放）时，请务必考虑可能导致问题的一些因素：
渲染引擎的区别：
Chrome 和 Firefox 使用不同的渲染引擎。Chrome 使用 Blink，而 Firefox 使用 Gecko。渲染引擎的差异可能会导致 CSS 转换的应用和呈现方式发生变化。
CSS 转换原点：transform-origin 属性指定应用转换的源。它可以影响元素的缩放或旋转方式。确保为相关元素一致地设置 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 标志可以帮助您找到解决方法或解决方案。
评论