12

I have been searching on the internet for a reason why my fullscreen javascript doesn't work in Safari, but yet works in webkit browser Chrome. It seems to that safari doesn't support the element.ALLOW_KEYBOARD_INPUT add-on for webkitRequestFullScreen.

function cancelFullScreen(el) {
    var requestMethod = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullscreen;
    if (requestMethod) { // cancel full screen.
        requestMethod.call(el);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

function requestFullScreen(el) {
    // Supports most browsers and their versions.
    var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen(el.ALLOW_KEYBOARD_INPUT) || el.mozRequestFullScreen || el.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(el);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
    return false
}

function toggleFull() {
    var elem = document.body; // Make the body go full screen.
    var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

    if (isInFullScreen) {
        cancelFullScreen(document);
    } else {
        requestFullScreen(elem);
    }
    return false;
}

Does anybody know a way to make safari accept fullscreen yet still be able to handle keyboard inputs?

Corfitz.
  • 1,864
  • 3
  • 31
  • 53
  • 1
    I stumbled upon this bug - I believe - today regarding this issue. On Safari 8.0.6 (OS X), if one is already in the full screen mode, then does a refresh, keyboard starts to work. It's still annoying since one also gets the Bump sounds that should indicate invalidated key presses. But the keypresses actually go through. – akauppi May 20 '15 at 22:37

2 Answers2

19

According to Apple's documentation, this is supposed to work in Safari 5.1 and later, but obviously it doesn't. I filed a bug report with Apple (which they don't make public), and the reply was as follows:

Engineering has determined that this issue behaves as intended based on the following: We intentionally disable keyboard access in full screen for security reasons.

I have replied asking that they at least update the documentation and make the lack of feature support detectable somehow. I will update here if I get a reply.

Unfortunately, there isn't a good way to even do feature detection, since element.ALLOW_KEYBOARD_INPUT is defined in Safari, and the function call with that flag doesn't throw an error. The only remaining option is to parse the user agent string (try this library).

Obviously, Apple doesn't yet document which version supports this, but according to this, it stopped working as of v5.1.2. That would leave a very small number of people using 5.1 un-patched, if it ever even worked at all. So it's probably not even worth detecting the version.

As a fallback, I would expand the desired DOM element to fill the browser window by setting CSS height and width to 100% and position to "fixed" or "absolute".

Update: It looks like the documentation has been corrected and no longer mentions the ALLOW_KEYBOARD_INPUT flag.

Community
  • 1
  • 1
brianchirls
  • 7,661
  • 1
  • 32
  • 32
  • Thanks very much for what you have done.. The main wish for me to make it full screen is to hide application bar and browser margins so that my WebApp is shown as a native application.. Thanks again.. I can't see which security issue might trouble the `element.ALLOW_KEYBOARD_INPUT` – Corfitz. May 21 '13 at 19:10
  • 6
    I believe the security risk is that a site could make a full-screen app that looks just like your browser, along with a fake URL bar and trick people into entering passwords in the wrong site. – brianchirls May 22 '13 at 02:13
  • Thanks for a great summary of the story so far. This simply means Chrome et.al. will get recommended for web apps where full screen mode absolutely makes sense. Hopefully Safari will join the crowd once the fullscreen APIs are stable. – akauppi May 20 '15 at 21:27
  • Safari 9.0 still doesn't allow keyboard input when the element is fullscreen. Try using Play/Pause (K), Seek Back 10s (J), and Seek Forward 10s (L) shortcuts in a fullscreen video in YouTube, but you can use them when the video is not fullscreen. – Brett VanderVeen Oct 22 '15 at 02:13
  • @brianchirls that makes a lot of sense. I suspect the reason Chrome allows keyboard input on full screen mode is because they display a warning indicating the browser is now running in full screen mode. I always wondered why Chrome did that, now this makes sense. Neat that someone realized this could be a security issue. – joshaidan May 11 '16 at 03:36
  • @brianchirls Hi, I know this question is old and stumbled upon this answer when I found out the keyboard does not work with my web application when in fullscreen mode in Safari. But recently, I found out a site that did figure out a way to make the keyboard work in fullscreen in Safari. The name of the website is `upgrad.com`. I don't know how they did that, but it works. Is there any hack to do this, that you know of, or should I ask a new question on SO regarding this? – Sajib Acharya Apr 01 '17 at 16:19
2

This has been fixed in Safari 10.1!

Under the "Safari Browser Behavior" section.

jeremypress
  • 1,186
  • 1
  • 7
  • 5