Bug 277603 – Poor video texture upload performance

• Status: NEW
• Component: Canvas

[Jake Archibald]

Spotted on an M1 MacBook.

https://static-misc-3.glitch.me/safari-webgl-video-slow/ - this is a 60fps video being drawn to a <canvas> using WebGL. In Chrome and Firefox it runs around 60fps. In Safari it's 30fps or less.

https://bugs.webkit.org/show_bug.cgi?id=234920 may be related.

[Jake Archibald]

Here's a demo with 2d canvas which has the same slowness https://static-misc-3.glitch.me/safari-webgl-video-slow-2/

If I swap requestAnimationFrame for video.requestVideoFrameCallback, the rate is even slower, but more stable I think.

[Alexey Proskuryakov]

Thank you for the report! I cannot reproduce this with macOS 15 beta, actually seeing FPS around 65-70 on an M3 MacBook Pro.

Could you please add more information about your configuration, and also how you measured?

[Jake Archibald]

I'm seeing this on a 14" 2021 MacBook Pro (M1).

https://photos.app.goo.gl/HMqdUfUDu5sfcP199 - you'll need to download the original video to see it in 60fps.

I measured it visually. The amount of frame drops seems to vary. When I took the video above, it was better than I was seeing it yesterday, but it's still dropping frames.

Safari's timeline suggests everything's fine, and rAF is firing at 60fps. It seems like the same frame is being pulled from the video on multiple frames, when it should be different.

[Jake Archibald]

https://static-misc-3.glitch.me/alpha-video-wc/ - here's another demo. In this case, the alpha channel is being applied manually. Again, it's smooth in Chrome and Firefox, but janky in Safari.

[Radar WebKit Bug Importer]

<rdar://problem/133626276>

[Kimmo Kinnunen]

Thanks for the report.
From the video, I cannot see the Safari janks. It's a bit shaky and blurry and such.
Locally on macOS Sequoia preview comparing Chrome and Safari, I cannot immediately observe Safari being overly janky. This of course might just be my eyes failing to see it.

The likely mechanism of the janks is drawing two frames and then jumping ahead. The likely root causes of these are:
 1. rAF running before the platform/GPU process has informed the web content process of the frame switch
 2. A bug in the video texture caching mechanism (texture upload thinks the video element frame did not change and skips the upload, when in reality it did change.


In 1., we might not be able to trigger the video frame increment at reliable intervals, rather the jitter in the video frame deltas would interact with rAF.

Will investigate a bit.