Screenshot of a page that uses -webkit-mask-image works in v1, but not v2

[ezzatron]

When upgrading from v1 to v2, I noticed some screenshots that used to work were coming out completely blank. I am explicitly setting the page viewport, so I don't think that this relates to #5080.

The one factor that the affected screenshots have in common is that they're produced from HTML that utilizes a CSS -webkit-mask-image with an SVG mask.

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 2.0.0
• Platform / OS version: macOS 10.15.1 (Catalina)
• URLs (if applicable): N/A
• Node.js version: 12.12.0

What steps will reproduce the problem?

Please include code that reproduces the issue.

1. Clone ezzatron/puppeteer-repro, checkout the screenshot-mask-image branch
2. Run node index.js
3. Check the screenshots produced by Puppeteer v1 and v2

What is the expected result?

A masked icon

What happens instead?

A completely blank image

[ezzatron]

I don't know if anyone is monitoring these issues, but this problem is still happening as of today. I would absolutely attempt a PR if I had any idea where to start on the issue.

[phips28]

We have the same issue, it still persists in v3 that was released today.

[ezzatron]

It would be amazing if someone from the project could at least acknowledge this issue.

I've just checked, and this is still a problem for Puppeteer 4 and 5. I've updated my repro repo with the new versions to demonstrate.

[ezzatron]

...and of course I solve the problem immediately after bumping the issue.

Turns out this is caused by CORS, related to using the file:// protocol. If I pass --disable-web-security as part of the launch options, everything is working as expected! 🎉