Page.pdf does not honor width and height parameters and is missing content

• Puppeteer version: 1.9
• Platform / OS version: ubuntu-xenial-16.04-amd64-server-20180627
• Node.js version: 6.4.1

What steps will reproduce the problem?

Here is code that uses Page.pdf() and Page.screenshot() to capture a single-page web application and write the browser window contents to PDF- and PNG-formatted files for comparison:

'use strict';

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch({
        args: [
            '--no-sandbox',
            '--start-maximized'
        ],
        timeout: 10000
    });
    var page = await browser.newPage();
    await page.setViewport({
        width: 1024,
        height: 1280,
        deviceScaleFactor: 1
    });
    await page.emulateMedia('screen');

    const url = 'http://higlass.io/app';
    await page.goto(url, {
        waitUntil: ['load', 'domcontentloaded', 'networkidle2', 'networkidle0']
    });

    await page.pdf({
        path: 'localPuppeteerTest.pdf',
        width: '1024px',
        height: '1280px',
        pageRanges: '1-1'
    });

    await page.screenshot({path: 'localPuppeteerTest.png', fullPage: true});

    await browser.close();
})();

What is the expected result?

The expected result is what is shown in the PNG screenshot:

What happens instead?

While the PNG is rendered correctly, the PDF rendering appears to ignore the specified page viewport dimensions and is missing content:

The PNG renderer appears to respect the page viewport dimensions, and contains all content (such as the element to the right of the “HiGlass” title).

Ideally, the PDF output should match the PNG output in respect to specified dimensions and content.

[lbittner-pdftron]

I am experiencing a similar issue.

    await page.pdf({
      path: `${outputFolder}/${outputName}.pdf`,
      printBackground: true,
      width: 612,
      height: 792
    })

produces a PDF with dimensions 458 x 594.

Settings the size via @page css produces the same result. Setting the viewport to 612 x 792 also does not fix the issue.

To me it feels like the width, height and defaultViewport options are completely ignored.

[senluchen2015]

Seems like a DPI of 96 is assumed in the conversion from px to inches here: https://github.com/puppeteer/puppeteer/blob/9923e56b3ed05cde014c0047a4f65fef7749ebb0/lib/Page.js#L1267

Whereas some machines may default to a DPI of 72 when calling the Page.printToPDF method here: https://chromedevtools.github.io/devtools-protocol/tot/Page#method-printToPDF. Perhaps a workaround for now is to scale it up before printing:

const pdf = await page.pdf({
    height: height / 0.75,
    width: width / 0.75,
    scale: 1 / 0.75,
    printBackground: true,
 });