webkitEnterFullScreen API is supported on iOS for video element, but not for a div element. Also as a fullscreen demo website shown, Safari on macOS supports div element but not on iOS.
Is there any plan to add the support in iOS? If not is there any way to fullscreen a div element or make it run as fullscreen on Safari iOS?
Safari's Fullscreen API implementation was updated and unprefixed in Safari 16.4 on macOS and iPadOS.
Now, in Safari 17.2 beta, Fullscreen API is supported on iPhone.
We'd love to have you help test Safari 17.2 beta. If you find any issues, provide your feedback at bugs.webkit.org.
Hi @Apple Staff
I've been on linked 17.2 Beta Release Notes but I could not find any mention of fullscreen API. In particular, I'd like to understand what parts of API are implemented and what parts are not, or maybe partially implemented.
Where can I find more details? Thanks
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 [...]".
This is soo sad.. it is almost 2025 now, still nothing works on an iPhone.. (not interested in using webkit prefix sh@# or browser flags) what the f@&$ is wrong with you Apple? user can decide when to start, when to leave.. no Problem in my opinion..
Seriously this is important Apple what are you doing? we need this for interactive elements that otherwise are impacted by the rest of the website. cmon!
There is a full screen button in the web applications I made. It works on Android but not on iOS. 3D Virtual Tour Matterport, for example, works perfectly on android, but it works like crap on iOS and iPhone, there is no full screen. Is Apple doing this on purpose? Why is he coming from behind? What kind of ******** is this? A complete dishonor. People shouldn't be using iPhones.
Apple is really SHABI
October 2024. It's really SHOCKING that Fullscreen API support is still missing on iPhone at this point. It's a standard, and a web app requirement and it reflects incredibly badly on Apple. I urge you to prioritise this in your roadmap much more highly than it currently is.
Obviously we won't get it... So frustrating.