Background/element goes black when entering Fullscreen with HTML5

fullscreen, google-chrome, html

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

Problem

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.

Original source