We’re using Marker.io’s Native Screenshot feature in a React application that contains a PixiJS/WebGL2 canvas. (PixiJS/WebGL2 canvas, React app, Chrome without extension)

We’re seeing an intermittent issue where the WebGL canvas is captured as a gray area, while the rest of the page is captured correctly.

After investigating, we were able to narrow this down to the initial frames returned by Chrome’s getDisplayMedia() capture stream.

Our setup:

PixiJS / WebGL2

preserveDrawingBuffer: true is enabled and verified on the actual WebGL2RenderingContext

canvas.toDataURL() consistently returns the correct image

Chrome’s tab-selection preview shows the WebGL canvas correctly

Marker.io Native Screenshot intermittently captures the WebGL area as gray

Having Chrome DevTools open appears to prevent the issue

We also reproduced the timing behavior independently of Marker.io using navigator.mediaDevices.getDisplayMedia().

Capturing the selected tab at different times after the stream starts produced:

100 ms: WebGL/Pixi area is gray

500 ms: correct

1000 ms: correct

2000 ms: correct

This suggests that Chrome’s compositor may need a short amount of time after the capture stream starts before the WebGL layer is available in the captured frames.

Feature request

It would be great if Native Screenshot could either:

wait for a few video frames before extracting the screenshot, ideally using requestVideoFrameCallback(), or

provide a configurable native screenshot delay similar to ssr.renderDelay

For example:

nativeScreenshot: {

renderDelay: 500

}

Waiting for actual video frames rather than using a fixed timeout would probably be the more robust solution.

This would make Native Screenshot capture significantly more reliable for applications using PixiJS, WebGL, games, interactive visualizations, and other GPU-composited canvas content.