puppeteer: Bug: Screen Media Query is not applied correctly in the generated PDF file

Steps to reproduce

Tell us about your environment:

Puppeteer version: 8.0.0
Platform / OS version: Windows 10 Pro
Node.js version: 14.16.0

PDF Generation Code for creating a 600px width PDF file

HTML markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        h1 {
            text-align: right;
            margin: 0;
            background-color: #FF0000;
        }

        @media only screen and (max-width: 599px) {
            h1 {
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <h1>Puppeteer</h1>
</body>
</html>

Node.js Code

const fs = require('fs');
const puppeteer = require('puppeteer');

(async () => {
    // Start: Puppeteer setup
    const browser = await puppeteer.launch({
        headless: true,
        slowMo: 0,
        timeout: 15000,
        ignoreHTTPSErrors: true,
        defaultViewport : {
            width: 500,
            height: 500,
            deviceScaleFactor: 1,
            isMobile: true, // "meta viewport" tag needs to be taken into account
            hasTouch: false,
            isLandscape: false,
        },
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });

    const page = await browser.newPage();

    const width = 600,
    height = 500;

    await page.setViewport({
        width,
        height
    });

    const htmlContent = fs.readFileSync('./assets/html/index.html', 'utf8');
    await page.setContent(htmlContent);

    await page.emulateMediaType('screen'); // Changes the CSS media type of the page to "screen"
    // End: Puppeteer setup

    // Start: Generate PDF file from html file content
    const pdfOptions = {
        printBackground: true,
        width: `${width}px`,
        height: `${height}px`,
        margin: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },
        path: './assets/pdf/puppeteer-generated-pdf.pdf',
        scale: 1,
        preferCSSPageSize: true
    }

    await page.pdf(pdfOptions);
    console.log('PDF generated and stored!');
    // End: Generate PDF file from html file content
})();

What is the expected result? The text “Puppeteer” should be on right side in the generated PDF file. html-page

What happens instead? The text “Puppeteer” came on left side in the PDF file. puppeteer-pdf

Following patterns were observed in PDF text alignment when changing screen media query `max-width` CSS property value:

If max-width is <= 449px, then text appearing on right side - Working as expected
If max-width is in between 450px and 599px(both inclusive), then text is appearing on left side - Wrong Behavior
If max-width >= 600px, then text appearing on left side - Working as expected

Another issue related to this one: #6954

Thank You

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 2
Comments: 16 (1 by maintainers)

Most upvoted comments

I believe this issue is still relevant, can be reproduced using the latest version of puppeteer (14.4.0)

ediweissmann on Jun 30, 2022