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.
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.
<rdar://problem/76366061>
Created attachment 425486 [details] Patch
Created attachment 425488 [details] Patch
commit-queue failed to commit attachment 425488 [details] to WebKit repository. To retry, please set cq+ flag again.
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].