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