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