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\');
            


        

Answer 1

The accepted answer works in most browsers, but in my tests not in IE11. For me this works in current Chrome, Firefox, Edge, IE 11 and Safari on iOS:

CSS:

body {
    background-color: #ffffff;
}

JS:

function openFullscreen () {
    let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    let elem = isSafari ? document.documentElement : document.body;
    let openFn = elem.requestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen || elem.msRequestFullscreen;
    if (openFn) {
        openFn.call(elem);
    }
};

edit: added exception for iOS/Safari which doesn't work with using body element.