Puppeteer JavaScript margin and HTML CSS margin inconsistency

Steps to reproduce

Tell us about your environment:

• Puppeteer version: ^1.13
• Platform / OS version: Debian (deployed via Docker FROM node:8.15.1)
• Node.js version: 8.15.1

What steps will reproduce the problem?

To produce the above image, print a PDF with the following code:

await page.pdf({
    format: "A4",
    displayHeaderFooter: true,
    headerTemplate: "<div style=\"margin-left:1.5cm; margin-right:1.5cm; margin-top: 0.5cm; font-size:12px; display:flex; flex-direction:row; justify-content:space-between; width:100%;\"><div>Version 1.2</div><div>Test</div></div>",
    footerTemplate: "N/A",
    printBackground: true,
    margin: {
        top: "1.5cm",
        right: "1.5cm",
        bottom: "1.5cm",
        left: "1.5cm"
    }
});

The page.setContent() can be set to anything.

What is the expected result? Expected result is that the margin-left: 1.5cm should match the margin from the page.pdf() object. Clearly it does not in this case. I need to change the margin-left property to about 1.25cm to get the same margin.

[SoerenWeber]

This seems to be caused by inconsistent resizing between body and header/footer in Chromium. It’s probably related to a scaling factor, currently 1.33, that’s used in Chromium’s print view. I guess the inconsistency stems from this line but I’m not sure why it is used that way.

As a work-around I used a CSS scale() transform function or set a zoom declaration to resize my elements to 75%. This isn’t a pixel-perfect solution, at least in my case though.

I was able to find two related issues on Chromium’s issue tracker [1][2]. For more background information on the scaling factor, another issue might be helpful [3].

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=833058 [2] https://bugs.chromium.org/p/chromium/issues/detail?id=818496 [3] https://bugs.chromium.org/p/chromium/issues/detail?id=273306

[stale[bot]]

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!