In Safari Browser, Nested Fullscreen does not work. For example, make the documentElement fullscreen. Then try to make a Video element within it fullscreen. Not only does the video not enter fullscreen mode, but in most third-party video player APIs this will also break the application (as many rely on sizing from expected fullscreen). Here is a reduced test case showing the problem:- https://living.video/videonestedfullscreen.html (p.s. works perfectly in all other modern browsers)
Also, here is a test case with a NESTED video "player" wrapper element using a third-party library (video.js):- https://living.video/edge.html Again, nested fullscreen on the video player (putting the video fullscreen using it's own video fullscreen button) BREAKS functionality because Safari does NOT place the ELEMENT into fullscreen mode as it should when there is already the documentElement in fullscreen. Works in all other modern browsers as per Fullscreen API spec which allows for muliple elements into the fullscreen stack.
Please note, I have changed the example case URL to:- https://living.video/fullscreenchange.html (please reference that instead) Make sure you reference the JavaScript Console in Safari, where I log the events. The BUG is that when you try and enter the second element into Fullscreen mode, it can be seen that the document.fullscreenElement returns NULL. It should return the second element, and it does not even recognise that the original documentElement is in fullscreen either. It says there are NO ELEMENTS in fullscreen mode, but there should in fact be TWO! Again, works perfectly in all other broswers.
<rdar://problem/48538081>
In addition to the bug reported above, in addition Safari Webkit does not flag ALL elements as :fullscreen via the CSS pseudo-class. See here:- https://github.com/whatwg/fullscreen/issues/70#issuecomment-469005965 The spec says:- The :fullscreen pseudo-class must match any element for which one of the following conditions is true: - element’s fullscreen flag is set. - element is a shadow host and the result of retargeting its node document’s fullscreen element against element is element. Note: Firefox and Edge return ALL ELEMENTS correctly, as per the spec. This test is also now included on my updated test case link:- https://living.video/fullscreenchange.html