search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.11k stars 56 forks source link

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

Closed ADTC closed 1 month ago

ADTC commented 1 month ago

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

https://github.com/muxinc/media-chrome/assets/6047296/37abf8e9-0d06-48af-8353-24c5c9b4ef63

BUT it doesn't happen in this link:

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

https://github.com/muxinc/media-chrome/assets/6047296/55657f92-e70e-492b-85fa-f0636a5ce453

ADTC commented 1 month ago

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.

image

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 commented 1 month ago

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: