blurry canvas if deviceScaleFactor > 1

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.5.0
• Platform / OS version: Mac OS X 10.11.6
• URLs (if applicable):
• Node.js version: 9.4.0

What steps will reproduce the problem?

1. Go to https://try-puppeteer.appspot.com/. Use the following code:

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://www.google.de/maps/@52.5197103,13.4068538,16.11z');

await page.setViewport({
    width: 800,
    height: 600,
    deviceScaleFactor: 3
});

await page.waitFor(5000);

await page.screenshot({path: 'screenshot.png'});

await browser.close();

1. Check screenshot and compare it against what you can see while browsing https://openlayersbook.github.io/ch06-styling-vector-layers/example-03.html on a retina display device in a real Chrome.

What is the expected result? Sharp canvas.

What happens instead? Blurry canvas.

[bbugh]

That looks great to me! We actually got caught on setContent, not goto, but hopefully someone will either find this thread or the documentation if they get stuck. Maybe mention what possible scenarios could cause the issue? (canvas or iframes rendering blurry). Nice. 👍

[JoelEinbinder]

Just to be clear, if a canvas does not listen for DPI changes, that is a bug in the canvas. This can happen in the real world for example if a window is dragged between two monitors or the zoom is changed (on desktop). So while setting the viewport before the page is loaded might “fix” the problem, it is actually just avoiding a bug in the website.