I wanted to allow users to click a link to make my webpage entirely full screen, using the RequestFullScreen function that browsers are deploying. You can see the page here. As suggested here, I'm calling requestFullScreen method of document.documentElement. The code looks like this:
var el = document.documentElement
, rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullScreen
;
if(typeof rfs!="undefined" && rfs){
rfs.call(el);
}
The thing is, I get really strange artifacts doing this, in my case the background is mostly black (you can see if you click the link). Am I doing something wrong? Manually setting fullscreen in the browser works just fine in all the browsers I've tested, which made me think maybe documentElement is somehow not inclusive enough.
In other words:
it seems like document.documentElement.mozRequestFullScreen
doesn't do the same thing as the user manually setting fullscreen. What's the difference? Why is this difference causing problems?