Bug 195153 - Nested Fullscreen does not work and breaks functionality
Summary: Nested Fullscreen does not work and breaks functionality
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 12
Hardware: Unspecified Unspecified
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-02-28 00:57 PST by Richard Bushell
Modified: 2023-04-21 05:37 PDT (History)
9 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Richard Bushell 2019-02-28 00:57:14 PST
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)
Comment 1 Richard Bushell 2019-02-28 14:21:50 PST
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.
Comment 2 Richard Bushell 2019-03-02 04:24:31 PST
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.
Comment 3 Radar WebKit Bug Importer 2019-03-02 13:19:04 PST
<rdar://problem/48538081>
Comment 4 Richard Bushell 2019-03-05 05:12:11 PST
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