Bug 230532 – WebRTC/video rendering flaky

• Component: WebRTC
• Status: RESOLVED FIXED

[David Zentgraf]

Created attachment 438789 [details]
video demonstrating video not being rendered until relayout is triggered by popup

(WebRTC) video is not being rendered sometimes. The problem started appearing in the latest iOS 15 RC (betas were fine according to our testing). Same was found in Safari Technology Preview 15.4. In the latter on desktop, the problem can be "fixed" by slightly resizing the browser window to trigger a re-layout. On iOS that's obviously not possible. See attached video for illustration of the issue. There should be a video as soon as the yellow rectangle appears, but it doesn't render. When triggering an overlay, it suddenly appears.

I don't have an easily reproducible test code, as you can see it's a complex app. Happens in both plain Safari and in-app Safari controllers.

[David Zentgraf]

Created attachment 438815 [details]
flaky rendering on desktop Safari 15

In fact, rendering is flaky in general in Safari 15, not just limited to iOS. This demonstrates probably the same bug in desktop Safari 15 on Stack Overflow. Clicking somewhere updates the missing parts, just like the popup in the original video shows.

[Radar WebKit Bug Importer]

<rdar://problem/83353741>

[Davy De Durpel]

Issue is still there in iOS 15.2 Public Beta 1

[youenn fablet]

Is there a way to reproduce the issue? Is it always happening or flakily happening?

[David Zentgraf]

There's no simple way to provide a reproducible example. The attached Stack Overflow example happens more, and rather frequently, on external monitors connected via a dock using DisplayLink (http://displaylink.com). This never happened in Safari 14-. But it doesn't always happen and it doesn't happen consistently.

In the Stack Overflow example, the page above the fold loads fine, but when clicking any element, nothing appears to happen. Dragging the window onto another screen causes the clicked action to happen (e.g. the panel I clicked on is now expanded). Or you see the same thing when scrolling, as shown in the screenshot; it scrolls, but does not render the new content that has scrolled into view, until dragged to a different monitor. It appears as if Safari thinks it's not on screen and stops rendering new content, or something along those lines.

It doesn't happen on all websites; some sites never exhibit this behaviour, and sites that do don't *always* exhibit this behaviour. It also can't be pinned down to a particular screen; sometimes it's the one, sometimes the other, and after a while it starts working just fine on both.

[youenn fablet]

StackOverflow issue might be a different code path, I am not sure this is related to the camera rendering code path.
It would be good to have a repro case, even if it does not repro consistently.

[David Zentgraf]

Created attachment 443660 [details]
Video demonstrating rendering flakiness

This demonstrates very flaky rendering and interaction. I'm clicking outside the window there to unfocus and re-focus it, which temporary restores correct rendering.

[David Zentgraf]

Believe me I'd love to provide a simple test case, but I don't have the time to try to produce some minimal website which triggers this behaviour. It happens on popular sites like SO which are publicly accessible, so I'll point there as a test case. I've now observed this behaviour also on the builtin screen as well (not external DisplayLink displays), so I'll discount that as a factor.

MacBook Pro 15'' 2016
2.6 GHz i7
16 GB
Radeon Pro 460 4 GB
macOS Monterey 12.0.1

[youenn fablet]

Thanks David. According the video, this rendering issue is not specifically related to WebRTC video but to general pages.
Let's see whether rendering folks have some thoughts on this.

We have same issue, the video does not render the mediaStream from getUserMedia, after page relayout, the video start rendering

[youenn fablet]

This might be fixed with https://bugs.webkit.org/show_bug.cgi?id=230623

It's still the same on iOS 16, the screen rotates, triggers a reflow, and then the rendered video blacks out. It looks like even the tabbing process is hanging. Temporary processing thing of recreating the player after rotation circumvented it.

[phoebe]

It's still the same on iOS 17. The video render the mediaStream from getUserMedia， and
the video style width and height change, causing the picture to be re-rendered and flicker.

[phoebe]

It's still the same on iOS 17. The video render the mediaStream from getUserMedia， and the video style width and height change, causing the picture to be re-rendered and flicker.

[youenn fablet]

This should be fixed in iOS 17.3.
Please reopen otherwise.

Hi youenn, this issue is able to reproduce in iOS 17.3 when playing the remote video, and works fine in iOS 17.4.1.

Can u help to confirm the fixed iOS version again?