Safari bug: Buttons in control bar don't fade out when moving away from playing video (not always)

[ADTC]

This doesn't always happen. It seems to be happening in my project, and also it happens at this link:

• https://www.media-chrome.org/docs/en/themes/responsive-themes

Screen.Recording.2024-05-08.at.8.39.51.PM.mp4

BUT it doesn't happen in this link:

• https://www.media-chrome.org/docs/en/get-started

In Chrome, it doesn't happen anywhere. (Recording for first link below.)

Screen.Recording.2024-05-08.at.8.31.01.PM.mp4

[ADTC]

And, then after some time has passed, (reproduction steps below) it starts to look like this. All the buttons disappear completely even in paused mode. Only the sliders are visible.

It's really hard to reproduce but if you let the video play to the end and then try to play/pause again, then move away the buttons may disappear.

[ADTC]

I FIXED IT!

Apparently Safari really hates opacity: 1, so you have to use opacity: 0.9999999 instead.

As a cautionary measure, I also put opacity: 0.0000001 although it looked like opacity: 0 works fine. You must have the second block though, otherwise the control bar will be stuck as visible all the time.

.controlBar {
  opacity: 0.9999999;
}

.video[userinactive]:not([mediapaused]):not([mediaisairplaying]):not([mediaiscasting]):not([audio])
  .controlBar {
  opacity: 0.0000001;
}

Where:

• .video is the MediaController or media-controller
• .controlBar is the MediaControlBar or media-control-bar