Bug 272078 – REGRESSION (iOS 17.4.1?): <video> tag fails to adjust its size according to changes in the parent element

• Status: RESOLVED
• Resolution: FIXED
• Component: Media

Created attachment 470740 [details]
demo

Code snippet demonstrating the minimal reproduction of the issue:
https://github.com/eeg1412/safari-video-bug

Running and clicking on the video or image will toggle the style of the element.

Conditions for reproduction:

1.Video playing from local camera
2.Parent element's display changing from block to flex
3.An <img> tag should be nearby the <video> tag
4.It seems to be related to the size of the <img> tag as well? Some sizes occur sporadically, some are difficult to reproduce, and some sizes are easy to reproduce.

The red area represents the size of the <video> tag.

[Alexey Proskuryakov]

Thank you for the report. Could you please clarify whether this is a new issue in iOS 17.4.1, and if so, which prior version you positively know had the expected behavior?

(In reply to Alexey Proskuryakov from comment #2)
> Thank you for the report. Could you please clarify whether this is a new
> issue in iOS 17.4.1, and if so, which prior version you positively know had
> the expected behavior?

Thank you for your response. I cannot confirm if the issue arose specifically with iOS 17.4.1, but the version users began reporting issues with was indeed 17.4.1. Our product was tested on iOS versions 16.7.1 and 16.3.1 during the last update, and the video tag displayed correctly in these versions.

[Radar WebKit Bug Importer]

<rdar://problem/125881482>

[Ahmad Saleem]

I took your GitHub example and add placeholder image:

> https://jsfiddle.net/a7hsrnzu/1/show (960 x 1536)

> https://jsfiddle.net/rdfpj98w/show (1536 x 960)

Using iOS 17.4.1 (after air-dropping above link) and giving permissions to enable camera and then trying to click image / video, I am unable to reproduce, it happens sporadically but not reliably.

I tried to zoom-in and zoom-out etc to see if it is reproducible in some resolutions but I am unable to do so.

Can you share your steps on how to reproduce this. NOTE - on macOS Sonoma 14.4.1 (Safari 17.4.1) it is not reproducible at all for me.

(In reply to Ahmad Saleem from comment #5)
> I took your GitHub example and add placeholder image:
> 
> > https://jsfiddle.net/a7hsrnzu/1/show (960 x 1536)
> 
> > https://jsfiddle.net/rdfpj98w/show (1536 x 960)
> 
> Using iOS 17.4.1 (after air-dropping above link) and giving permissions to
> enable camera and then trying to click image / video, I am unable to
> reproduce, it happens sporadically but not reliably.
> 
> I tried to zoom-in and zoom-out etc to see if it is reproducible in some
> resolutions but I am unable to do so.
> 
> Can you share your steps on how to reproduce this. NOTE - on macOS Sonoma
> 14.4.1 (Safari 17.4.1) it is not reproducible at all for me.

The link you provided indeed does not reproduce the issue. It seems that in the JSFiddle you provided, the issue does not occur because it runs within an iframe tag.

I have provided a GitHub Pages link where the issue can be reproduced. Below are the steps I followed:

1.Open the link on an iPhone (iOS 17.4.1): https://eeg1412.github.io/safari-video-bug/
2.Allow camera access.
3.Wait for the camera feed to appear on the screen.
4.Click on the camera feed to change the size of the video.

This issue may not necessarily reproduce 100% of the time, but the probability of reproduction is high. If it does not reproduce, you may need to try refreshing the page and repeating the above steps.

This issue does not occur on macOS; it has only been observed on iPhones so far.

Additionally, we have added a "change history" button in the code because we have noticed that using history.pushState to change the route causes the camera to malfunction. We have found similar feedback within the community regarding this issue, so we did not raise a separate query for it.
Note: Clicking the "change history" button will alter the route. If you refresh the page at this point, it will result in a 404 error. You will need to re-enter the GitHub Pages link provided above.

[Eric Carlson]

Pull request: https://github.com/WebKit/WebKit/pull/28125

[EWS]

Committed 278350@main (0470d0f338da): <https://commits.webkit.org/278350@main>

Reviewed commits have been landed. Closing PR #28125 and removing active labels.