'Webkit browser fullscreen request changes body colour and removes console

I am currently preparing a website which should switch the full website to fullscreen upon user request. I use the following function:

launchFullScreen(document.documentElement);

function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

Everything works fine in Edge, Chrome and FF, yet on Safari the body colour of my website gets turned from black to white - also the console of the browser becomes black so I cannot really see what's happening there. Any ideas?

javascripthtmlcss


Solution 1:[1]

Turns out Safari somehow changed the background colour upon fullscreen request. Adding the following to the CSS of the page solved the issue:

    html:-webkit-full-screen {
        background-color: black !important;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Felix

Related Questions