Bug 266688 – Video disappears or changes its size for a short period of time when a user changes the size of its div container

• Component: Media
• Status: NEW

[Ivan]

Created attachment 469141 [details]
Demo video of the issue

Hi. I experienced video disappearing or changing its size for a short period of time when a user changes the size of its div container.

I can steadily reproduce it on macOS Sonoma 14.* and iOS 17.*

I've prepared a repository so you can try to reproduce it. Also, attaching a demo video.  

See demo video: https://github.com/ivan-banha/safari-video-container-resize/blob/main/assets%2Fsafari-video-container-resize.mp4
Demo link: https://ivan-banha.github.io/safari-video-container-resize/
Demo code: https://github.com/ivan-banha/safari-video-container-resize/tree/main


STR:

1. Open the demo link from Safari 17.
2. Press the "Share Screen" button and select a desktop or window to share.
3. Press the "Resize video container" button to make the video container small or big.

NOTES:

1. The red container represents the div, which contains a video element.
2. The container with blue border is an actual video element.

[Radar WebKit Bug Importer]

<rdar://problem/120202067>

[Szymon Witamborski]

Thank you Ivan for filing this bug! I've been experiencing exact same issue on the same platforms.

Been also trying to come up with a repro:
https://codepen.io/brainshave/pen/eYXzvrL

It's different in some ways:

- uses canvas as a source for the video
- draws lines to demo how far the image is stretched or shrunk. 
- sets width directly on the video rather than on a container

Though I think the latter and the blue border in the screensharing demo seems to point to this being an issue with how the video element's content is rendered internally, rather than sizing of the video element in the DOM. So the "replaced" part of "replaced elements" (like canvas, video, img)

(The top part with a canvas was just to test if other "replaced elements" are affected, which they thankfully aren't.)

Steps to reproduce:

- click on 2x button for the video, then 1x
- click on 3x, then 1x
- click on 4x, then 1x

Expected results:

- resizing the video element retains the image just like the canvas element above it

Actual results:

- when going form 1x to 2x, the red box (1/2 size of the surface) fills the video element briefly
- 1x to 3x: green box (1/3 size of the surface)
- 1x to 4x: blue box (1/4 size of the surface)

It looks like Safari is for a short while overcorrecting the transformation by applying it one time too many on the content of the video:

- if the size increase is 4x, the resized surface is filled with 1/4th of the frame so the video is scaled 16x rather than 4x for a short while
- similar behaviour seems to carry with decrease: frame is shrunk by 4x within the element for a short while when sizing the element down by 4x

[Szymon Witamborski]

Created attachment 469343 [details]
Safari video resizing overcorrecting demo