UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36

Steps to reproduce the problem:
1. Download the files. Adjust the const url in pdfsample.js to point to your local path to pdfsamplejs.html
2. Run pdfsamplejs.html via node.
3. Check the generated file pdfsample.pdf

What is the expected behavior?
The div element with the id "box" should be blue, because the virtual screen width is 900px. The css media rule would only color #box red, if the screen width was below 720px. 

What went wrong?
The div element #box is red.

See the attached screenshot of the rendered pdf pdfsample.png.

I was able to narrow down the bug more by adding a javascript that tracks every resizing of #box and body. During the generation of the pdf, the width of the body dips below 720px several times. The width of the final pdf is about 765px, when the viewport width is set to 800px. While this is also an issue, the width still is well above 720px. 
Apparently, some parts of the pdf rendering rely on the temporarily decreased size.

Here is the output of the js:
box: 720;body: 884;box: 720;body: 884;box: 593;body: 659;box: 593;body: 659;box: 720;body: 884;box: 720;body: 884;box: 593;body: 659;box: 593;body: 659;

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 64.0.3282.119  Channel: stable
OS Version: OS X 10.13.2
Flash Version: 

I originally noticed this bug on a headless Chromium 63 on Ubuntu.

Note the line: page.emulateMedia('screen'). This issue does not appear with "print".

When using the print dialog of Chrome, the correct css style is applied.
 

Deleted: pdfsamplejs.html 1.8 KB

pdfsamplejs.html 1.8 KB View Download

Deleted: pdfsample.js 1.4 KB

pdfsample.js 1.4 KB View Download

Deleted: pdfsample.png 21.3 KB

	pdfsample.png 21.3 KB View Download