Browser's last frame shows black background for <canvas> element

obsproject / obs-studio

OBS Studio - Free and open source software for live streaming and screen recording

https://obsproject.com

GNU General Public License v2.0

60.38k stars 7.99k forks source link

Browser's last frame shows black background for <canvas> element #6010

Open Rosuav opened 2 years ago

Rosuav commented 2 years ago

Operating System Info

Windows 10

Other OS

No response

OBS Studio Version

27.2.1

OBS Studio Version (Other)

No response

OBS Studio Log URL

https://obsproject.com/logs/YTQN8AKsq_ZBZFoY

OBS Studio Crash Log URL

No response

Expected Behavior

Select any browser source, refresh it. Page should smoothly refresh, remaining transparent until it has content to draw.

Current Behavior

Browser turns black briefly before the image returns to normal.

Steps to Reproduce

Have a browser source (not site specific)
Right-click, Properties
Refresh Cache of Current Page

Anything else we should know?

Unable to reproduce the problem on Linux; appears to be isolated to Windows. The problem does not occur with OBS 27.1.3.

zxsdklfhskyrvk commented 2 years ago

Multiple users are seeing/reporting this. This notably impacts the twitch games by PixelPlush.

This is not an issue on Windows 27.1.3, per multiple users.

RytoEX commented 2 years ago

I've tried to reproduce this on Windows 10 and have been unsuccessful. Is there a specific URL that will more reliably reproduce this?

Rosuav commented 2 years ago

I haven't been able to repro on Linux, so all my diagnosis is done by begging the help of some other streamer. The easiest way to test it would be with a page that uses JavaScript for a location.reload().

zxsdklfhskyrvk commented 2 years ago

The only way I can produce this is via PixelPlush.dev twitch games. That requires Twitch account integration. And hence I can't share the URL because it contains my access token. It take a couple of minutes to setup an account there (assuming you have a twitch account already)

Rosuav commented 2 years ago

We were able to repro the problem by manually refreshing a page inside OBS.

zxsdklfhskyrvk commented 2 years ago

Can you share an example url with the dev?

Rosuav commented 2 years ago

We tested it with Kappamon, a completely unrelated browser source. I wish I could reproduce the problem on my own system so I could test it, but can you try just a plain simple HTML page, and manually refreshing it in OBS? I don't think it's site-specific.

RytoEX commented 2 years ago

We tested it with Kappamon, a completely unrelated browser source. I wish I could reproduce the problem on my own system so I could test it, but can you try just a plain simple HTML page, and manually refreshing it in OBS? I don't think it's site-specific.

I did try the default browser source and https://www.google.com. I did try manually refreshing the sources. Neither appeared to exhibit the problem, or did not exhibit a problem that matched your description.

Please provide a specific URL or the HTML for a local file so that we can test exactly what you are testing.

Rosuav commented 2 years ago

I no longer have access to a system with the issue. The problem is serious enough that everyone is downgrading, and I cannot replicate the problem on Linux. Unfortunately, only someone who actually develops on Windows is going to be able to test this.

WizardCM commented 2 years ago

Unable to reproduce this on Windows with a transparent browser source. The provided example PixelPlush seems to require money for the transparent games.

I have reproduced it with Kappamon, but it's not the entire webpage that goes black, only the portion where the video(?) is. This does seem to only occur when hardware acceleration is enabled. Theoretically this might be tied to the new rendering code, but I will have to do more testing. It could just be Chromium being Chromium.

Edit: Dev tools confirms it's only the <canvas> that's showing a black frame.

Rosuav commented 2 years ago

Use the drop game, with one of the non-premium themes. Disable the background. It should exhibit the behaviour.

but it's not the entire webpage that goes black, only the portion where the video(?) is

Ah! Interesting. It might be a phenomenon of the Canvas element. If that's the case, then this URL should show the same thing:

https://sikorsky.rosuav.com/channels/demo/commands#hypetrain/graphical

WizardCM commented 2 years ago

Couldn't reproduce on a plain page with a canvas. There must be something else your page is doing.

<html>
<head>
<style>

</style>
</head>

<body>
<canvas width="500" height="500"></canvas>
<p>Test page</p>
</body>
</html>

WizardCM commented 2 years ago

Confirmed with Kappamon that this happens on macOS too, so it's not tied to the custom CEF rendering code - I'm starting to think this is outside of our control and caused by something in Chromium's Canvas renderer combined with something on the page(s) mentioned.

zxsdklfhskyrvk commented 2 years ago

Did you test the drop game as suggested? It definitely has free versions. You just need to check the dropdowns.

WizardCM commented 2 years ago

I prefer to have as simple a reproduction as possible, as that helps track down issues. A vague "look around the dropdowns and manually hide the background" makes it very hard to verify an issue - especially if I've never used a service before.

WizardCM commented 2 years ago

After further testing, the black frame comes from the last frame, not the first frame. This confirms my suspicion that this is caused by something on the page itself.

I verified this by using Dev Tools to set a background color on body (using an inline stylesheet) and refreshing. With this recorded, I went frame by frame - the black square on the canvas appears before my background colour disappears, meaning it's before the page unloads (though after the pageunload event).

So far I can only reproduce this on Kappamon, and not my own Canvas test page, provided above.