elements over video in native full screen mode – SAFARI

Issue

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.

Solution

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.

Answered By – Giulio G.

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.