Fullscreen API not working if triggered with F11
It seems impossible as of now.
See this question that was asking exact same thing.
But it's an evolving situation that deserves being revisited from time to time, so here are some details I gathered.
One comment there said:
This fullscreen window mode is OS dependent, only at an app level, and not tied to any API available to us poor web-devs. [...] You won't find any cross-browser/cross-OS hack (I don't even know any for my own browser/OS). The only way you could get something would be through [a] more powerful API, giving you an application access to the browser's window.
The API that allows to programmatically control fullscreen state is defined in fullscreen spec, and I was hoping it would shed light on the issue. Browsers do not fully implement it yet (e.g. document.exitFullscreen()
is not implemented in Chrome and document.webkitExitFullscreen()
does not return a Promise
), but it gives hints about where things are going. Unfortunately it does not mention the pre-existing full-screen browser feature (the one triggered by F11), so it's difficult to say how this would evolve.
For now, F11-fullscreen and programmatic-fullscreen are 2 different things, although not entirely isolated from one another. Also, on macOS for example, browser's "full screen" feature is completely different, as it does take the whole screen but can still leave address bar and/or tabs shown.
If you check this demo page for a library that wraps browser-specific implementations, you can see that:
- When programmatically setting body or any element fullscreen, the browser applies special CSS rules (e.g. background becomes black).
- This does not happen with F11-fullscreen
- This also does not happen with programmatic fullscreen on document (
document.documentElement
), so that's the closest you can get from F11-fullscreen.
But that does not make F11-FS and programmatic-FS-on-doc-element equivalent:
- animated transitions are different (and actually a bit clunky for example on Firefox and programmatic-fullscreen on document element, as it fades to black in anticipation of black background, but there is no black background when fullscreened element is document, as stated above)
- When F11-fullscreened,
document.documentElement === (document.msFullscreenElement || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement)
is false, but true when programmatic-fullscreen-on-document-element (verified on Chrome & Firefox & IE11) - F11 key can exit programmatic-fullscreen, but programmatic-exitFullscreen cannot exit F11-fullscreen. Which is the problem you are running into. Also, Esc key cannot exit F11-fullscreen, but does exit programmatic-fullscreen.
So, what should we do then?
Since there are 2 different features, maybe it's OK to leave them be: if users enter F11-fullscreen, they will know how to exit by just pressing the same key again. If they enter programmatic-fullscreen with your UI controls, make sure you make it as obvious how to exit. It might be (understandably) frustrating as a dev not to be able to control both 100%, but in practice users will probably be fine, as they will use one or the other.
Enter fullscreen on page load without human intervention
You can make Chrome go in fullscreen with --start-fullscreen
flag added in the desktop shortcut command.
To add a desktop shortcut in Chrome go in the Main menu > More tools > Create shortcut...
After that, you should have a shortcut on you desktop. Right click on it, go on Properties and add the flag at the end in Target on Windows or Command on Ubuntu.
Related Topics
Editing CSS in Gwt Windowbuilder
How to Have "Margin:Auto" and "Margin-Left:Offset" Working Together
CSS Flex-Basis: 0% Has Different Behaviour to Flex-Basis: 0Px
Position Fixed Content Overlapping Problem
How to Make a Div Adopt The Height of The Screen
Bootstrap Scrollspy Link Active Not Applied
How to Style The Input Type "Time"
CSS3/HTML 5/Png Blur Content Behind Element
How to Make a Div Have a Fixed Size
How to Move Scrollbar from Left to Right in CSS
What's The Most Efficient and Reliable Method to Test CSS Design in Multiple Legacy Browsers
How to Position Two Divs Above Each Over
How to Dynamically Size Multi-CSS Sprite Image
Prevent Contenteditable Mode from Creating <Span> Tags