[SOLVED] Background/element goes black when entering Fullscreen with HTML5

Background/element goes black when entering Fullscreen with HTML5

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.

Solution

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