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. So, in your case:

#container:fullscreen {     background-color: rgba(255,255,255,0); } #container:-webkit-full-screen {     background-color: rgba(255,255,255,0); } #container:-moz-full-screen {     background-color: rgba(255,255,255,0); } 

should do the trick. (Make sure you use the appropriate vendor version(s) -- :-webkit-full-screen and :-moz-full-screen -- until the spec finalizes; see MDN for more information.)

In fact, maybe just

*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {     background-color: rgba(255,255,255,0); } 

EDIT by @DevilishDB: used rgba for a transparent BG and added the * selector to make the previous thing work

Answer 2

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