Is there a way to tell whether Safari is fullscreen? (e.g. document.fullscreenElement)

Question

I am trying to find out whether Safari is in fullscreen mode using Javascript. Chrome and Mozilla both use vendor-prefixed versions of document.fullscreenElement:

isFullscreen = function() {
  return document.fullscreenElement
      || document.webkitFullscreenElement
      || document.mozFullScreenElement;
}

However, this doesn't work on Safari 5.1.7 -- there is no "webkitFullscreenElement" or similar property on document.

Does anyone know if there's a way to tell whether Safari is in fullscreen mode?

Antipas

Answer 1

It's pretty hard to find this one, but the property you are looking for is:

document.webkitCurrentFullScreenElement

As you can see it doesn't follow standard, not even close, at all.

Also worth to mention as it is related: the property to check if fullscreen mode is supported is also hard to find (I still haven't...) so to check for support I do:

if (typeof document.webkitCurrentFullScreenElement !== 'undefined') ...

as the property will be null (or the fullscreen element).

Lushy

This is the correct answer. @samfen can you please change the accepted solution for future visitors. BTW, if you need a reference for this: developer.apple.com/reference/webkitjs/document/… – Constantine

Answer 2

Since there was no response to this, here is the hack I ended up using, which should be pretty broadly-applicable to anyone. Presumably this shouldn't be necessary in the near future once Safari adds the document.fullscreenElement specified in the W3 standard.

In my case, the situation was that I had a fullscreen button, and I wanted the fullscreen button to become a "shrink" button when the site was in fullscreen (like YouTube videos). As part of this, I had already implemented the :fullscreen css selectors to turn my button into a "shrink" button whenever the site was fullscreen.

I realized that Safari respected the :-webkit-full-screen css pseudoclass. Therefore, it was quick work to check that my button's image was the "shrink" image (AFAIK you can't test for pseudo-classes directly), and, if it was, we must be fullscreen.

So:

CSS:

.fullscreen-button
   background-image: fullscreen.png

/* these match if .fullscreen-button is inside a fullscreen body element
   (comma-separated selectors don't seem to work here?) */
body:fullscreen .fullscreen-button
   background-image: fullscreen-exit.png
body:-webkit-full-screen .fullscreen-button
   background-image: fullscreen-exit.png
body:-moz-full-screen .fullscreen-button
   background-image: fullscreen-exit.png

JS:

isFullscreen = function() {
  // this doesn't yet exist in Safari
  if (document.fullscreenElement
      || document.webkitFullscreenElement
      || document.mozFullScreenElement) {
    return true;
  }
  // annoying hack to check Safari
  return ~$(".fullscreen-button").css("background-image").indexOf("exit")
}

This hack should be useable by anyone. Even if you're not doing something like changing the background image of a button in fullscreen mode, you should always be able to make some trivial little css rule change to one element -- especially if it's something that won't actually be visible, like the background-color of an element that's invisible, or the font-size of an element that doesn't have any text -- and test for that in JavaScript.

Antipas

Thanks for this, I think I will need to use this for the Safari hack as I have it 50% working :) – Adjustment

request you to change the accepted solution to @k3n answer. – Constantine

Answer 3

Update 2022. I found that this works for Safari - 'webkitIsFullScreen'.

So the following snippet seems to cover most browsers:

// Check Fullscreen

function check_fullscreen() {
  if (document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen) { 
    // document is fullscreen
  }
  else { 
    // document is not fullscreen
  }
}

Brevet