[iOS Safari] Fullscreen API on a non-video element

Hi @GiuseppePiscopo

You need to enable the Fullscreen API flag in Safari settings on your iPhone. It works, but it looks like it's not finished yet, as it has a few graphical bugs. In addition, there is a large "close" button in the corner of the screen.

I just update my iPhone iOS 17.2 and no full screen sadly :-( I wonder why it dropped off?

@michall12 or @dife,

How do you get this to work on an iPhone? I have enabled Settings | Safari | Advanced | Feature Flags | Fullscreen API, but divs or iframes do not have a .webkitEnterFullScreen (or .requestFullScreen for that matter). Is this available only for an HTMLVideoElement? If it does work on a normal div, how do you do it??

Today is February 22, 2024. For most of February so far, I've been happily testing the fullscreen javascript API with ordinary div elements in Safari on iPhone iOS 17.4 beta 3 (21e5200d). Possibly also in iOS 17.4 beta 2 and 1 before that, but I wasn't keeping track of the minor beta versions.

For me too, as forum user "dife"'s comment reports experiencing, Safari's fullscreen implementation placed a disruptive "X" overlay in the upper left hand corner. The "X" overlay is especially disruptive in portrait orientation on iPhone because there isn't much horizontal width for the "X" to get out of the way of the prime "real estate" for reading text at the top of the web page. To try to work around the "X", I was experimenting with adding an extra tall amount of top padding or margin to push the page's first text content below the "X". Also to limit use of that extra top whitespace to just iOS Safari, and just in fullscreen mode and portrait orientation, by detecting those conditions with media queries and javascript.

Notwithstanding this hopefully temporary "X" inconvenience, it's been a pleasure finally to be able to view my webpage in fullscreen on an iPhone. For years already the javascript fullscreen API has been working wonderfully in my Android phones' Chrome and Firefox browsers (without any intrusive "X" overlay [!]) and also in Safari on my iPad. On my iPad in Safari, the "X" overlay has always been present but is much less disruptive because there is a lot of width to work with for displaying text to the side of the "X" on an iPad, even in portrait orientation.

Sadly, I upgraded today to iPhone iOS 17.4 beta 4 (21E5209b), in which support for the fullscreen API seems to have gone away entirely. This must be due to what I see referenced in the release note in "Safari 17.4 Beta Release Notes Released February 20, 2024 — 17.4 beta (19618.1.15)", where it says "Fixed multiple issues by disabling support for the Fullscreen API on iOS. (122908994)". I hope Apple will soon figure these issues out and finally bestow to the World the fullscreen API in iOS Safari on iPhone!

Hi again. Does anyone have any news about this?

Safari Safari 17.5 beta went out and release notes mention nothing related to fullscreen.

Previous Safari 17.4 release notes contanis 8 fullscreen mentions, but none seems related to this issue.

For that matters, I cannot seems to find release notes for 17.4 intermediate beta releases, and the (in)famous statement "Fixed multiple issues by disabling support for the Fullscreen API on iOS" is absent in final release notes, so I might guess that statement has been reverted?

Still, I cannot figure out what to do of the last comment above by Apple Staff, the one at the bottom of page 1, starting with "Safari's Fullscreen API implementation was updated [...]".