2

This bug is appearing only in Safari on Mac OS and only with the current set up in our application. Initially I though it was a z-index issue, since some elements disappeared after updating that value.

Although there's a last element that has no z-index value and it's always displayed on top of the full-screen video.

--see screenshot below--

enter image description here

I have tried removing all styling from the bar you see on the screen and it would still appear on top of the video.

--see screenshot below--

enter image description here

As you can see the elements within the bar are still visible.

I haven't been able to reproduce the issue on codepen.io or jsfiddle and nothing is currently available in Stackoverflow or GitHub.

ggwzrd
  • 128
  • 10

3 Answers3

2

SOLUTION:

removing will-change property from the container solved the issue.

DESCRIPTION

The problem that caused this issue was the property will-change set to one of the containers of this video element.

The structure of the application is quite complex so I am not going to post the whole code here. Although by moving around the video element in the inspector and testing the full-screen functionality every time, I narrow down the problem to one div container that had this property.

If you guys find out the exact reason why the default full-screen functionality of safari broke down because of the will-change property, post a comment or an answer since it will be very appreciated.

ggwzrd
  • 128
  • 10
1

I had a similar issue with my application. Web elements were overlapping fullscreen videos. Only effected Safari on Mac OS. I also assumed it was a z-index issue specific to Safari and initially tried modifying z-index when fullscreen mode was detected. Thanks to Guilio G.'s comment above the issue was resolved by removing the -webkit-backdrop-filter:blur(3px); of a parent <div>.

Like Guilio G., I don't yet know why, but this -webkit declaration was causing the issue and removing it resolved the problem.

benji9000
  • 11
  • 1
1

In my case, this issue was being caused by isolation: isolate on an ancestor element. Removing this property fixed the issue.

Hopefully Safari fixes this, since isolation is a wonderful property that solves a bunch of stacking context issues.

Joshua Comeau
  • 2,594
  • 24
  • 25