Puppeteer ignores some CSS rules to print PDF when I used the @media print

Question

When I used the puppeteer to print html to pdf, I met a strange problem. I find the puppeteer always ignore some CSS rules which is in @media print.

Here is my env:

Puppeteer version: 1.11
Platform / OS version: Win10/CentOS7
Node.js version: 10.15.0

CSS codes:

@media print {
    .flipbook-viewport .flipbook{
        width: 794px!important;
        height: 1123px!important;
        max-height: 1123px;
        max-width: 794px;
        background-color: red;
    }

    .right-01 .image {
        width: 92%;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url('../image/content/test.png');
        height: 920px;
        /* width: 740px; */
        margin-top: 0.8rem;
    }
}

You can notice that I set a background-color to check the test result. In my test, when I executed puppeteer with page.emulateMedia('print'), the flipbook-viewport and flipbook's rules work fine. But the right-01 and image's didn't work.

But the funny thing is when I used the @media screen (also change the page.emulateMedia to screen) with the same rules, they all worked fine. So I think it might have some problem with puppeteer.

What is the expected result? good.pdf

What happens instead? wrong.pdf

Does anyone meet this problem before? How to resolve this problem? Please help.

An example of my puppeteer code:

const puppeteer = require('puppeteer-core');

(async () => {
    const browser = await puppeteer.launch({executablePath:'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'});
    const page = await browser.newPage();
    await page.goto('http://www.kaol.org/TurnPage/', {waitUntil: 'networkidle2'});
    await page.emulateMedia('print');
    await page.pdf({path: 'hn.pdf', format: 'A4', printBackground: true});
    await browser.close();
})();

Answer 1

The documentation for PDF print of puppeteer list a few possible options. Among them also printBackground:

<boolean> Print background graphics. Defaults to false.

Try setting this to true to include background-graphics and -colors to your PDF-export.