Versions:

• puppeteer: "^10.1.0"
• Node: v14.17.5

The code works fine and give me the perfect transparent PDF using omitBackground:true. But when I use headerTemplate or footerTemplate I lost the transparency of the PDF, looks like using omitBackground:true with headerTemplate or footerTemplate does not work. When I comment the code for headerTemplate or footerTemplate, I get perfect transparent PDF but I need headers and footers too.

Below is the sample pdfOptions I am using for PDF generation

const pdfOptions = {
   displayHeaderFooter: true,
   footerTemplate: 
   '<div style="color: lightgray; border-top: solid lightgray 1px; font-size: 10px; padding-top: 5px; text-align: center; width: 100%;
        background:transparent !important; background-color:rgba(0,0,0,0) !important;">
        <span>This is a test message</span> - <span class="pageNumber"></span>
   </div>',
   format: 'A4',
   margin: {
        bottom: 70, // minimum required for footer msg to display
        left: 25,
        right: 35,
        top: 30,
   },
   printBackground: true,
   omitBackground:true
}

  await page.pdf(pdfOptions);
  await page.close();

I tried to use css to transparent the background by setting

"background:transparent !important,background-color:rgb(0,0,0,0) !important

to the footertemplate html, but It did not work.

PS: Raised it on github too. https://github.com/puppeteer/puppeteer/issues/8152