[Bug]: element disappears when cross the bound of the PDF footer

[lifecoderua]

Minimal, reproducible example

import puppeteer from 'puppeteer';

(async () => {
  // Launch the browser and open a new blank page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate the page to a URL
  await page.goto('https://developer.chrome.com/', {
    waitUntil: 'networkidle2',
  });

  await page.emulateMediaType('screen');

  await page.pdf({
    path: 'hn.pdf',
    displayHeaderFooter: true,
    printBackground: true,
    footerTemplate: `
        <style>
            #footer {
                -webkit-print-color-adjust: exact;
                padding: 0;
                /* anything below 0, and the DIV disappears */
                margin-bottom: -1px;
                background-color: aquamarine!important;
             }
             #footer div {
                font-size: 30px; 
                background-color: red!important;
                color:yellow;
            }
        </style>
        <div>Footer</div>
    `,
    margin: {
      bottom: 200,
    }
  });

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

Error string

no error

Bug behavior

• Flaky
• PDF

Background

I've been trying to adjust some dynamic footer element positions. The CSS includes a negative margin. At some point between Puppeteer v18.2.1 and v21.7.0 an element started to disappear even while 1px out of the Footer space.

Footer margin: 0

Footer margin: -1px

Expectation

A visible part of the element to be displayed

Reality

An element completely disappears

Puppeteer configuration file (if used)

No response

Puppeteer version

22.6.5

Node version

20.11.0

Package manager

npm

Package manager version

10.2.4

Operating system

macOS

[github-actions]

The issue has been labeled as confirmed by the automatic analyser.
Someone from the Puppeteer team will take a look soon!

---

Analyzer run

[OrKoN]

I believe styling the footer this way relies on the internal implementation of the footer so you need to expect the default styles https://source.chromium.org/chromium/chromium/src/+/main:components/printing/resources/print_header_footer_template_page.html;l=13;drc=f6529c7990744370869e4ab2794caae6c46ba044

To make sure, it does not break in the future, I'd recommend only styling the content inside the footer.

[lifecoderua]

Tested, it doesn't make a difference as long as at least a part of an element is caught outside of the footer area.

           #footer {
              margin: 0;
              ...
           }
           #footer div {
              /* margin-bottom: 0; /* Big and nice DIV, completely visible */
              margin-bottom: -1px; /* no DIV at all */
              ...
          }

[OrKoN]

I am able to reproduce and I not sure why PDF printing excludes the elements with negative margins from the view. Could you report it to crbug.com/new please? (it is an issue in the browser implementation it seems).

[lifecoderua]

Submitted at https://issues.chromium.org/issues/336164418

My theory is the rendering engine tries to preserve an element in one piece, and pushes it to the "next page" which may work for the regular content, but fails for the footer. But I'm not common with the internals to say how realistic this assumption is.