webkitRequestFullScreen fails when passing Element.ALLOW_KEYBOARD_INPUT in Safari 5.1.2

Question

Running into the following problem specifically in Safari 5.1.2 when attempting to use the javascript fullscreen api.

By copy and pasting the following lines into your browser on a loaded page, you can see the effect.

This works in Chrome 15 and Safari 5.1.2:

 javascript:document.querySelector('body').webkitRequestFullScreen();

This works in Chrome 15 but fails silently in Safari 5.1.2:

 javascript:document.querySelector('body').webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

ALLOW_KEYBOARD_INPUT seems like it should work in Safari, according to documentation here: http://developer.apple.com/library/safari/#documentation/WebKit/Reference/ElementClassRef/Element/Element.html

Any ideas why this isn't working?

Solution 1

This is known Safari bug. It can be sniffed during full screen switching:

someElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
if (!document.webkitCurrentFullScreenElement) {
    // Element.ALLOW_KEYBOARD_INPUT does not work, document is not in full screen mode
}

Use this real time sniffing and thus your code will support future fixing bug in Safari.

Solution 2

someElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) works in chrome.

And someElement.webkitRequestFullScreen() works in safari 5.1.7

All test base on windows 7.

Solution 3

I just ran into the same issue, and this is most definitely a bug.

This may be a case of the Undetectables. Guess we're gonna have to use good ol' browser sniffing.

...(/Safari/.test(navigator.userAgent) ? undefined : Element.ALLOW_KEYBOARD_INPUT)

[edit] ...in which case keyboard input isn't possible. So I guess it's best to cut out fullscreen mode in Safari for the time being [/edit]

_{Keep in mind that the fullscreen API is in a very early stage at the moment, and should not be used in production}

Comments

[Ruben]

I have to timeout the webkitCurrentFullScreenElement property read for at least 80ms in Chrome, before that it's null (seems related to the animation Chrome uses for going fullscreen). Isn't there something I can check directly?

[luwes]

There is document.webkitIsFullScreen but I tested and it also requires a timeout before it turns to true in Chrome. However Chrome doesn't really require sniffing because it goes full screen regardless.