Bug 224161 – Broken transition when video player with MediaStream changes size

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[Serj Lavrin]

Reproduction:

1. Create video player element
2. Assign CSS transition to that element
2. Assign captured user media stream to that element
3. Change width and height of the element

What happens:

Video transitions are not smooth. Video mid-transition appears to be jerky, and sometimes black background being exposed.


What expected:

The transition should be smooth.



Additional info:


This demo reproduces this bug in Safari 14 on macOS

https://jsfiddle.net/ArmorDarks/enrL02yx/35/

1. Load the demo
2. Wait for predefined video to load
3. Click a few times the "Toggle video size" button - video will smoothly resize without any issues
4. Click "Start camera stream". It will request you camera stream and assign it to the same video player
5. Try the "Toggle video size" button again - instead of a smooth transition, the video will "jump" mid-transition and expose black background sometimes

Here's the recording of the reproduction:
https://www.dropbox.com/s/kcbse6bv18ri1og/Screen%20Recording%202021-04-04%20at%2000.36.15.mov?dl=0

It seems to be more prominent in heavier applications. For instance, this recording uses exactly the same positioning, but produces a much worse transition:
https://www.dropbox.com/s/mjgqzd4al175f8r/Screen%20Recording%202021-04-04%20at%2000.37.44.mov?dl=0

This case is quite common for modern web-based streaming solutions, like Restream Studio, which are using transitions on video element with a user's captured video to smoothly switch between different layouts. There seems to be no way to workaround that issue.

[Smoley]

This does not reproduce for me on Safari 13.1.2, I can reproduce this on Safari 14.0.1 as well as TOT 14.2.

[Radar WebKit Bug Importer]

<rdar://problem/76366061>

[youenn fablet]

Created attachment 425486 [details]
Patch

[youenn fablet]

Created attachment 425488 [details]
Patch

[EWS]

commit-queue failed to commit attachment 425488 [details] to WebKit repository. To retry, please set cq+ flag again.

[EWS]

Committed r275662 (236298@main): <https://commits.webkit.org/236298@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 425488 [details].