Background/element goes black when entering Fullscreen with HTML5

Question

I'm using the following script to make my web app go fullscreen...

function enterFullscreen(){
    var element = document.getElementById('container');
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    l('Fullscreen Mode entered','internal');
}

And so, when I click the trigger button via $('button.toggle-fullscreen').click(function(){ enterFullscreen(); }); I do in fact enter fullscreen, only my element goes black. Just black, nothing else.

Anyone know how to fix this?

FYI I'm using Chrome 27.

Answer 1

The default background color of the browser's full-screen "visual environment" is black. Your content actually is there, but it's currently black text on black background, so you can't see it (try highlighting or pressing Ctrl+A to see for yourself).

If you want to make the background a different color, you must specify a CSS rule to set the background-color property to something other than the default. This was once done universally by setting a background-color property applied to the fullscreened element selected with the :fullscreen pseudo-class, but now the correct way to do so is to modify the element's associated ::backdrop peudo-element.

#container::backdrop {
    background-color: rgba(255,255,255,0);
}

Note that :fullscreen pseudo-class still works as a selector to alter other properties of fullscreened elements, but cannot reliably cause any background-related properties to be rendered. (If you wanted to be really robust, you could apply your background to both ::backdrop and :fullscreen.)

So, to apply a background color to any fullscreened element (i.e., not restricting our styling to any particular element(s) of interest), with support for browsers that either don't support ::backdrop or don't support :fullscreen background styles, you could do:

:fullscreen, ::backdrop {
    background-color: rgba(255,255,255,0);
}

Answer 2

None of the other answers is working for me (Chrome 70 or FF 63)

Adding this to the CSS file does work

::backdrop
{
    background-color: white;
}

Answer 3

I don't know the exact answer to your question, but this information might help:

I had a similar black background problem with enterFullscreen(document.body);. The background color became normal after I changed the line to enterFullscreen(document.documentElement);. The css I used is body{background-color: #D7D7D7; margin: 0px;}.

Answer 4

Don't know why, but it seem that the background of the body element is not displayed in fullscreen or become transparent...

I fixed this by setting a background color to the html element, and it work just fine:

html {
    background-color: #ffffff;
    /* Or any color / image you want */
}

Answer 5

I spent hours to find a trick for this issue.

I ended by doing that :

• Fixing a white color to backdrop
• And using z-index, to push it down

Then :

• Fixing a white color to the html page content
• And using z-index, to push it up (above backdrop)

It works for me on Firefox and Chrome

::backdrop {
    z-index:0;  
    background-color: white !important;
}

html, *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: white !important;
    z-index:1;
}

Answer 6

the main solution didn't work to me :-( I found another solution, but yes, in the css:

:-webkit-full-screen, :fullscreen, :-ms-fullscreen, :-moz-full-screen {
position: fixed;
width: 100%;
height: 100%;
top: 0; 
background: none;}

I understand this is for the position of my elements, but I no sure. Hope help to somebody. Bye and thanks.

Answer 7

The accepted answer works in most browsers, but in my tests not in IE11. For me this works in current Chrome, Firefox, Edge, IE 11 and Safari on iOS:

CSS:

body {
    background-color: #ffffff;
}

JS:

function openFullscreen () {
    let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    let elem = isSafari ? document.documentElement : document.body;
    let openFn = elem.requestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen || elem.msRequestFullscreen;
    if (openFn) {
        openFn.call(elem);
    }
};

edit: added exception for iOS/Safari which doesn't work with using body element.