[BUG] WebGL 2 canvas are invisible in screenshots on Webkit (Official latest docker image)

[robinDurstCS]

Context:

• Playwright Version: 1.26.1
• Operating System: Ubuntu (Playwright's docker image)
• Node.js version: v16.17.1 (the one in the image)
• Browser: Webkit

Code Snippet

Hello, hoping everyone is doing well 🙏 I've encountered an issue very similar to https://github.com/microsoft/playwright/issues/586 while working, created a little minimal reproduction repository here. I used that WebGL 2 sample for our minimal reproduction case.

The issue is that whenever I take a screenshot using page.screenshot(), the canvas drawn with WebGL 2 are not visible on it (WebGL 1 are). This only happens inside the docker image, on my laptop (MacOS), the canvas are visible.

Here is the same screenshot taken on Webkit (top) and Chromium (bottom) with (https://github.com/robinDurstCS/minimal-webgl2-screenshots/blob/main/index.js) on MacOS :

And then the exact same code executed inside the official docker image (npm run start:docker, please see Dockerfile) :

From what I understood, we're using Webkit 16 here, maybe it doesn't support WebGL 2 ? What I know is latest Safari versions does.

Sorry If this is unclear, please feel free to ask for anything, I'll do my best to help, I remain at your disposal.

Cheers 🌞

[lseguin1337]

+1

[sanjuant]

Hello, I have the same problem. I automate tasks in a canvas with opencv, and I noticed with the screenshot that the content was not displayed. I tried with Firefox and Chromium and I had the same problem.

[Manduro]

Same here. It used to work in the playwright:v1.24.0-focal image.

[prideout]

Note that WebGL 1.0 is now deprecated in ThreeJS, which is the most common way for developers to interact with WebGL.