[PDF] Using different margin bottom on first page doesn't work

Steps to reproduce

Environment:

• Puppeteer version: 1.3.0
• Platform / OS version: Ubuntu 14.04
• Node.js version: 7.6.0

Code:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://github.com/GoogleChrome/puppeteer', {waitUntil: 'networkidle2'});
await page.addStyleTag({
    content: '@page:first {margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;}'
});
await page.pdf({
    path: 'test.pdf',
    format: 'A4',
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size:16px;width:100%;text-align:center;">HEADER</div>',
    footerTemplate: '<div style="font-size:16px;width:100%;text-align:center;">FOOTER</div>',
    margin: {top: '50px', right: '10px', bottom: '50px', left: '10px', }}
);
await browser.close();

Expected result: The first page should have no margins (and therefore hide the header and footer), while all following pages should have the specified margin and display the header and footer.

Actual result: The header is properly displayed on all pages except the first one. The footer, however, is only displayed on the last page. It seems that the margin bottom isn’t applied properly.

[spiritix]

Any updates on this?

[spiritix]

@hakimio This is what I tried first. It results in exactly the same (wrong) PDF. Therefore I assume, that the margin option of the page.pdf() internally produces CSS as well.

However, I just discovered something really interesting. Have a look at the following two PDF files:

No footer/header: https://drive.google.com/open?id=12jshVH0_hz3S-JK-wCqxxrs3h0IuDDDu With footer/header: https://drive.google.com/open?id=1IcF2PQ1MC5jOr3WsVtj1KCQKt57Qriqt

As you can see, as soon as I set the displayHeaderFooter option to true, the margin-bottom gets ignored. This happens with both, using regular CSS as well as using the margin option of the page.pdf() method.