Safari: fullscreen button is not working

[shastik]

Description

Hello,

when I try to open video in fullscreen on MacOS in Safari 15.6.1 it is not working. It will display a broken control bar. See screenshot: https://ibb.co/LYpPVGz There is no error message in browser console.

It does not work on version 8.3. In the older version of videojs fullscreen mode works correctly.

It can be reproduced by running this code https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0 in Safari on MacOS:

Reduced test case

https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0

Steps to reproduce

1. Open in Safari - https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0
2. Click on the fullscreen mode icon
3. Fullscreen is not opened correctly

Errors

No response

What version of Video.js are you using?

8.3

Video.js plugins used.

No response

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

Safari 15.6.1

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

MacOS

[welcome]

👋 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 can't reporduce on the same verison of Safari, and haven't seen any other reports.

[shastik]

It can be reproduced also via browserstack.com. Just select Safari version 15.6 or lower and open URL with videojs 8.3 - https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0 and when video starts playing -> try to click on fullscreen mode.

On the newer version of Safari, it works correctly.

[amtins]

@shastik I did a quick test on Browserstack with Safari 15.6 and I was able to reproduce the issue with video.js v8.x.x. I checked the diff between v7.21.4..v8.0.0, I came across this modification which seems to be the cause of this behavior.

This will require investigation to understand the intention behind the change. In the meantime, perhaps this workaround can help. Please note I haven't tested the side effects it could potentially have.

.video-js {
  display: block;
}

[mister-ben]

Sorry I misread that as 16.5.1. This would be a less impactful change, only affecting fullscreen.

.video-js.vjs-fullscreen {
  display: block;
}

FWIW display: block; was changed to display: inline-block; in 8 to more closely match browsers' display of <video> elements.

[shastik]

Thank you @mister-ben and @amtins . Your fix is working correctly.

[djbloc]

Just to say this affects iPadOS 15.7.7 / iPad Mini 4 as well. Confirm the workaround fixes the issue.