Portrait HLS video loads in corner of video element on iOS 15.5 when switching from display: none

[JoshuaCWebDeveloper]

Description

In our app, we hide videos using display: none and then show them at the time that we start playing them (linked to a user action). This worked fine with no issues until iOS 15.5 was released.

What currently happens On iOS 15.5, when a portrait (taller than wide) HLS video is shown via switching off display: none at the same time it is played by videojs-http-streaming for the first time, the video content initially renders in the lower right corner of the video element before re-positioning to take up the full <video> element as expected:

What I would expect When playing a video for the first time, even when showing it by switching off display: none, the content, when first rendered, should fill the <video> element as expected.

Additional details and example A reproducible example with instructions may be found here: https://np4uki.csb.app/.

Even though this bug just started happening in iOS 15.5 (which points to a bug in Safari), I'm reporting it here since it only happens when I play an HLS video using VHS. If I instead use Safari's native HLS playback, this issue does not happen.

Regarding the usage of display: none, there are obviously many different ways to hide and show a video. I'll say two things: 1) we have a strong preference to use display: none due to the robust nature of it, and 2), when experimenting with different strategies (visibility, opacity, and width/height), other somewhat similar issues were encountered (many on iOS 15.5, but some with other versions of iOS as well). A couple of examples are the video at first rendering much larger or much smaller than the <video> element before resizing to fit as expected.

Reduced test case

https://np4uki.csb.app/

Steps to reproduce

See: https://np4uki.csb.app/.

Errors

None

What version of Video.js are you using?

7.19.2

Video.js plugins used.

Built-in videojs-http-streaming

What browser(s) including version(s) does this occur with?

Any browser on iOS 15.5. Tested mostly on Safari 15.5 on iOS 15.5.

What OS(es) and version(s) does this occur with?

iOS 15.5

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[mister-ben]

I'm reporting it here since it only happens when I play an HLS video using VHS. If I instead use Safari's native HLS playback, this issue does not happen.

VHS is never used on iPhone, as it doesn't support MSE, and not by default on iPad.

The same behaviour can be reproduced frequently on iPhone without Video.js here. Less often it's initially small but centred. Looks like a webkit issue. If you can't hide the video some other way, you might try covering it until the first playing event.