Header and footer are unusually small

[hahyes]

Hi there,

I started doing some tests with Playwright Sharp and I needed to add header and footer. I ended with code like this...

using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync();
var page = await browser.NewPageAsync();
await page.GoToAsync("https://www.google.com");
await page.GetPdfAsync(
    Environment.CurrentDirectory + "\\try.pdf",
    margin: new Margin() { Bottom = "0.2in", Left = "0.2in", Right = "0.2in", Top = "0.2in" },
    headerTemplate: "<h1>header</h1>",
    footerTemplate: "<h1>Footer</h1>",
    displayHeaderFooter: true);

Problem is, header and footer are very small. I don't know why. I tried some HTML templates I had, I tried code above. It's always like this.
Second problem is, when I would try to make it bigger with font-size style for example, text become bigger but page content except margin space seems to be over header and footer (like wrong zindex or something). What is happening?
Is it Playwright Sharp or main library issue?

[hahyes]

try.pdf

Both problems you can see here.

[avodovnik]

This happens in the Node version as well, so probably best if we look at it from that POV.

Repro:

const { chromium } = require('playwright');

(async () => {
    var browser = await chromium.launch();

    var page = await browser.newPage();
    await page.goto("https://www.google.com");
    await page.pdf({
        path: "try.pdf",
        headerTemplate: "<h1>Header</h1>",
        footerTemplate: "<h1>Footer</h1>",
        displayHeaderFooter: true,
        margin: { top: "0.2in", bottom: "0.2in", left: "0.2in", right: "0.2in" }
    });

    await browser.close();
})();

[pavelfeldman]

Did you try bumping the font size? See https://stackoverflow.com/questions/49943479/puppeteer-header-and-footertemplate-doesnt-work

[pavelfeldman]

Closing as per suggestion above.

[akashlimbani]

How I can add it center of footer ?