HTML/WebM Text Animation Freezing in OBS v31 (WebGPU Enabled) #11745

sirfnomi · 2025-01-19T13:52:33Z

Operating System Info

Windows 11

Other OS

No response

OBS Studio Version

31.0.0

OBS Studio Version (Other)

No response

OBS Studio Log URL

https://obsproject.com/logs/g9cf3cSlUBsWcVHO

OBS Studio Crash Log URL

No response

Expected Behavior

The text animation should play smoothly over the WebM background, as it did in OBS v30.2.3.

Current Behavior

The text animation stutters and appears freezing.

Steps to Reproduce

Create a new scene in OBS v31.
Add a Media Source and select a WebM video file.
Add a Browser Source and use the following simple HTML/CSS/JS code (or any similar text animation):

<!DOCTYPE html>
<html>

<head>
	<title>test</title>
	<style type="text/css">
		body {
			width: 1024px;
			height: 576px;
			margin: 0px auto;
			padding: 0;
			background: transparent;
			overflow: hidden;
			text-rendering: optimizeLegibility;
			-webkit-font-smoothing: antialiased;
		}

		#news {
			position: absolute;
			top: 14px;
			left: 52px;
			width: 885px;
			height: 57px;
			color: wheat;
			font-size: 50px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#inner {
			position: absolute;
			white-space: nowrap;
			transform: scale(0);
			will-change: transform;
			/* animation: scale 4s linear infinite; */
		}

		#bg {
			position: absolute;
			top: 11px;
			left: 35px;
			width: 925px;
			height: 62px;
			object-fit: fill;
		}

		@keyframes scale {
			0% {
				transform: scale(0);
			}
			40% {
				transform: scale(1);
			}
			80% {
				transform: scale(1);
			}
			100% {
				transform: scale(0);
			}
		}
	</style>
</head>

<body>
	<video src="https://files.catbox.moe/a9v502.webm" width="100%" height="100%" id="bg" autoplay loop muted></video>
	<div id="main">
		<div id="news">
			<span id="inner">MEDIATEK'S MOST POWERFUL FLAGSHIP ANDROID CHIP OFFICIALLY ANNOUNCED</span>
		</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			var tl = gsap.timeline({ repeat: -1 });
			tl.to('#inner', { scale: 0.96, opacity: 1, duration: 0.5 }, 'label4')
				.to('#inner', { scale: 1, duration: 8})
				.to('#inner', { scale: 0, opacity: 0, duration: 0.6 })
				.to('#inner', { scale: 0,duration: 2 });
		});

		function play() { }

		function stop() { }

		function update(str) { }
	</script>
</body>

</html>

Observe the text animation. It should stutter/freeze.
Downgrade to OBS v30.2.3 and repeat the steps. The animation should be smooth.

Anything else we should know?

Description:

Since upgrading to OBS Studio v31, I've encountered significant stuttering and performance issues with a scene containing an HTML simple text animation overlaid on a WebM video background. This issue was not present in OBS Studio v30.2.3, where the animation played smoothly.

The scene setup involves:

A Browser Source containing HTML/CSS/JavaScript for a simple text animation scaling in and out.
A Media Source playing a WebM video file as the background.

In OBS v30.2.3, the text animation displayed smoothly over the WebM background. However, in v31, the animation freezing noticeably, appearing stutters.

Key Observation:

After investigating chrome://gpu in both versions, I noticed a crucial difference:

OBS v30.2.3: WebGPU was disabled.
OBS v31: WebGPU is enabled.

I suspect that the enabling of WebGPU in v31 is contributing to this performance degradation.

Additional Observation:

I also checked the WebGPU status using https://webgpureport.org/. Interestingly, the report shows WebGPU is functioning correctly when I directly access it through the Chrome browser. However, within the OBS Browser Source, the WebGPU report indicates that the gpu adapter is missing or failed.

OBS Studio Version: v31

Operating System: Windows 11

GPU: Intel HD Graphics 5500

Additional Information:

This issue seems specific to the combination of HTML text animation and WebM background when WebGPU is enabled.
The WebGPU report indicates it is functioning correctly in the Chrome browser but fails within the OBS Browser Source.

I hope this detailed report helps in identifying and resolving this issue. Thank you for your time and attention.

The text was updated successfully, but these errors were encountered:

Lordmau5 · 2025-01-19T14:28:58Z

Out of curiosity, can you try to add this browser source with OBS's video tab set to 60FPS, then (if it stutters) observe when the stutters start and end?

As in, the frames specifically.

https://app.singular.live/output/6W76ei5ZNekKkYhe8nw5o8/Output?aspect=16:9

Might be best to do a quick mp4 recording of it

Also probably related to obsproject/obs-browser#468 and obsproject/obs-browser#470

reitowo · 2025-01-19T14:35:03Z

Could you provide a video recording?

sirfnomi · 2025-01-19T15:36:34Z

Please find the video recording you requested below. In the video recording, the output freezes at frame 405 and resumes at frame 422. then freezes at frame 704 and resumes at frame 722. This freeze occurs repeatedly every few seconds.
https://github.com/user-attachments/assets/a87c5096-9e55-42d2-a163-97d8031bb4b8

Lordmau5 · 2025-01-19T15:46:07Z

the output freezes at frame 405 and resumes at frame 422. then freezes at frame 704 and resumes at frame 722. This freeze occurs repeatedly every few seconds.

So about 250ms of a freeze, which is what I and others have observed as well. Plus I assume if you refresh the page it will do it around the same frames for the same duration again.

It's being discussed on the OBS Discord in a thread and we think we found the spot in the Chromium code where this delay is happening.
Someone tested without the corresponding section in the code and it's not doing the stutters anymore

Here's the link in case you're curious (You'll have to join the OBS Discord though in that case if you aren't already on it)
https://discord.com/channels/348973006581923840/1204343196725805076

reitowo · 2025-01-19T15:49:00Z

Thanks, we seems find out the reason, its internal in Chromium. You can join discord for latest information.

sirfnomi · 2025-01-19T16:07:35Z

I've included a video showing the problem I'm experiencing. As you can see, the text freezes each time it scales in. I'm wondering if this is the same issue you're discussing, or a related one. The video itself continues to play (though possibly with dropped frames), but the text freezes.

2025-01-19.21-00-17.mp4

WizardCM · 2025-01-19T21:52:25Z

Duplicate of obsproject/obs-browser#468

Closing in that case.

sirfnomi · 2025-01-20T19:28:00Z

During my testing, I noticed that using the --disable-frame-rate-limit flag eliminated the text animation issue I'm encountering, resulting in smooth playback. However, even with this flag enabled, the output from this link (https://app.singular.live/output/6W76ei5ZNekKkYhe8nw5o8/Output?aspect=16:9) still freezes similarly to how it does without the flag.
This leads me to wonder if the issue I'm experiencing is exactly the same as the one you've identified.

Would it be possible to take another look into this specific issue?

Lordmau5 · 2025-01-20T21:46:44Z

@sirfnomi It very much looks to be the same issue, which we've figured out is something in Chromium itself, not in OBS or even the library being used (CEF - Chromium Embedded Framework)

An issue has been opened on the Chromium bug tracker here https://issues.chromium.org/issues/391118566

sirfnomi · 2025-01-21T07:37:52Z

Thanks for confirming that the issue likely lies with Chromium and for providing the bug report link. I'll definitely follow this bug to stay updated.

sirfnomi changed the title ~~HTML/WebM Text Animation Stuttering in OBS v31 (WebGPU Enabled)~~ HTML/WebM Text Animation Freezing in OBS v31 (WebGPU Enabled) Jan 19, 2025

WizardCM closed this as completed Jan 19, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML/WebM Text Animation Freezing in OBS v31 (WebGPU Enabled) #11745

HTML/WebM Text Animation Freezing in OBS v31 (WebGPU Enabled) #11745

sirfnomi commented Jan 19, 2025 •

edited

Loading

Lordmau5 commented Jan 19, 2025

reitowo commented Jan 19, 2025

sirfnomi commented Jan 19, 2025

Lordmau5 commented Jan 19, 2025

reitowo commented Jan 19, 2025

sirfnomi commented Jan 19, 2025

WizardCM commented Jan 19, 2025 •

edited

Loading

sirfnomi commented Jan 20, 2025 •

edited

Loading

Lordmau5 commented Jan 20, 2025

sirfnomi commented Jan 21, 2025

HTML/WebM Text Animation Freezing in OBS v31 (WebGPU Enabled) #11745

HTML/WebM Text Animation Freezing in OBS v31 (WebGPU Enabled) #11745

Comments

sirfnomi commented Jan 19, 2025 • edited Loading

Operating System Info

Other OS

OBS Studio Version

OBS Studio Version (Other)

OBS Studio Log URL

OBS Studio Crash Log URL

Expected Behavior

Current Behavior

Steps to Reproduce

Anything else we should know?

Lordmau5 commented Jan 19, 2025

reitowo commented Jan 19, 2025

sirfnomi commented Jan 19, 2025

Lordmau5 commented Jan 19, 2025

reitowo commented Jan 19, 2025

sirfnomi commented Jan 19, 2025

WizardCM commented Jan 19, 2025 • edited Loading

sirfnomi commented Jan 20, 2025 • edited Loading

Lordmau5 commented Jan 20, 2025

sirfnomi commented Jan 21, 2025

sirfnomi commented Jan 19, 2025 •

edited

Loading

WizardCM commented Jan 19, 2025 •

edited

Loading

sirfnomi commented Jan 20, 2025 •

edited

Loading