Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:10

Top GitHub Comments

2reactions

ediweissmanncommented, Jun 30, 2022

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

0reactions

zero2411commented, Dec 2, 2022

I got the media query working by dividing the breakpoint by 4 and then multiply by 3. So if you want a breakpoint on 600px, that would be: (600 / 4) * 3 = 450px