elements over video in native full screen mode - SAFARI

Question

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--

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--

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.

Answer 1

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.

Answer 2

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.