14

When I "fullscreen" an element (let's say a div), I can't get anything other elements to appear (while in fullscreen mode). Why is that happening? How can I accomplish this?

Related: Is there a way to overlay a <canvas> over a fullscreen HTML5 <video>?

Community
  • 1
  • 1
mustafa.0x
  • 1,476
  • 2
  • 17
  • 30

1 Answers1

23

It seems that browsers (Chrome 28, Firefox 23) set the z-index of fullscreened elements to 2147483647 (the largest 32-bit signed number). According to tests, setting the z-index of other elements to the same z-index will cause them to show, but the z-index of the fullscreened element can not be changed (it can, but the browser just ignores the value — even with !important).

Maybe the only reference I could find to this:

https://github.com/WebKit/webkit/blob/master/LayoutTests/fullscreen/full-screen-zIndex.html

Also, in Chrome dev tools:

Computed style on fullscreened element

So either set elements to the maximum z-index, or, the better solution would be to just create a container element, make it so that all elements you want to display are children of the container element, and fullscreen it.

mustafa.0x
  • 1,476
  • 2
  • 17
  • 30
  • 1
    When I tried this, it only worked in Chrome, not Firefox or IE11, though the z-index of the fullscreened element was set in all three. – trysis Dec 11 '14 at 00:35
  • 2
    same here, 3 years later. – Dalibor Aug 21 '17 at 11:59
  • 2
    Here's the Firefox solution: https://stackoverflow.com/questions/45798213/firefox-fullscreen-video-append-dom-elements – Dalibor Aug 30 '17 at 10:58
  • 4
    After Chrome's update to v.69 this solution (which was also implemented by myself) won't work anymore, so a better one that seems to work fine is the Firefox one provided by Dalibor. – Ustym Ukhman Oct 11 '18 at 10:12