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.

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.

• javascript
• html
• google-chrome
• fullscreen

7 Answers 7

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);
}

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;
}

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;}.

Don't know why, but it seem that the background of the body element is not displayed in fullscreen or bee 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 */
}

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;
}

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.

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.