puppeteer: [Bug]: Header/Footer placeholders stopped working in chrome-headless-shell in Docker

Minimal, reproducible example

const { writeFile } = require('fs/promises');
const { launch } = require('puppeteer');

const puppeteerOptions = {
    margin: { top: 100, bottom: 100, left: 100, right: 100 },
    format: 'a4',
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size:20px; padding-left: 20px;">Page: <span class="pageNumber"></span> / <span class="totalPages"></span></div>',
    footerTemplate: '<div style="font-size:20px; padding-left: 20px;">Page: <span class="pageNumber"></span> / <span class="totalPages"></span></div>',
};

async function main() {
    const browser = await launch({
        args: ['--no-sandbox', '--disable-dev-shm-usage'],
        headless: 'shell',
    });

    const page = await browser.newPage();
    await page.setContent('<div>Hello, World!</div>', { waitUntil: 'networkidle0' });

    const pdf = await page.pdf(puppeteerOptions);

    await browser.close();

    writeFile('./output/output.pdf', pdf);
}

 main();

Error string

no error

Bug behavior

• Flaky
• PDF

Background

Since Puppeteer v22, the magic CSS classes stopped working on Linux and old headless (shell) mode:

It works correctly:

• On Linux and new headless
• On MacOS and new headless
• On MacOS and old headless (shell)

Reproducer using Docker and the script above:

docker run -i --init --cap-add=SYS_ADMIN --rm -v .:/home/pptruser/output/ ghcr.io/puppeteer/puppeteer:latest node -e "$(cat test.js)"

Also see #10024 (last 2 comments)

Expectation

I expected to get the pageNumber and totalPages placeholder to be replaced.

Reality

It does not get replaced on Linux with headless shell.

Puppeteer configuration file (if used)

No response

Puppeteer version

22.6.2

Node version

20.11.1

Package manager

npm

Package manager version

10.2.4

Operating system

Linux