cannot add background color to Header/Footer in pdf

Question

I'm trying to customize the header and footer. But I cannot add the background color to the footer. This is what I'm trying to do.

page.pdf({
    path: 'test.pdf',
    format: 'a4',
    landscape: '!data.isPortrait',
    footerTemplate: '<div class="footer" style="height:75px;position: absolute;top:auto;left:0px;right:0px;left:0px;background-color:red;">\ </div>',
    displayHeaderFooter: true,
    margin: {
        top: "75px",
        bottom: "75px"
    }
});

environment

Puppeteer version:1.1.0
Platform / OS version:ubuntu 16.04
Node.js version:8.9

Answer 1

To add background-color to header/footer or to the page in Puppeteer, we need to add an additional css property, -webkit-print-color-adjust: exact. Now it works fine.