WebKit Canvas element invisible on screenshot

When using page.screenshot on Webkit, Canvas elements appear to be invisible.

When running headless: false the canvas is visible in browser just not in screenshot.

It looks to be only on WebGL Canvas elements…

Chromium & Firefox work as intended.

Example

const pw = require('playwright');

(async () => {
  const browser = await pw.webkit.launch(); // or 'chromium', 'firefox'
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://pixijs.io/examples/#/demos-basic/container.js');

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

Chromium

Firefox

WebKit

[lucas-jones]

MacOS

[pavelfeldman]

I’ll close this as a part of the bug triaging process. We have hundreds of bugs and feature requests with dozens and even hundreds of upvotes, while this one only has a few thumbs up. Please feel free to open a new bug and link this one if you’d like to see it addressed.