How can I change browser "missing area" color when toggling full screen for an element smaller than the whole body? - background-color

Question

I have the following problem: when toggling custom full-screen mode from the Web application, the surrounding background is black and I want to change it (as the actual background).
Details come below.
1) Javascript code to toggle fullscreen and focus an inner element
function toggleFullScreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
$(function () {
$("#fullscreenButton").click(function () {
var actualBody = document.getElementById("#FullScreenElementId");
if (actualBody) {
toggleFullScreen(actualBody);
}
});
$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenChange MSFullscreenChange", function (/*data*/) {
var actualBodyJq = $("##FullScreenElementId");
if (actualBodyJq) {
actualBodyJq.toggleClass("fullscreen-style");
}
$("body").toggleClass("fullscreen-body-style");
});
});
2) Css styles
.fullscreen-style {
overflow-y: scroll;
background-color: rgb(255, 255, 255) !important;
}
.fullscreen-body-style {
background-color: rgb(255, 255, 255) !important;
}
Switching to full-screen mode for the div works, but applying the style for the body seems to be ignored. For the shown image, I can see this computed style for background:
Question: is it possible to control how the browser (Chrome, Internet Explorer 11+) displays the "missing area"?

Answer 1

I have found a way to trick the browser (Internet Explorer) not to display the black area anymore. I have changed div style to use the whole viewport with the following style:
.fullscreen-style {
overflow-y: scroll;
background-color: rgb(255, 255, 255) !important;
/* this is remove black area in IE */
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
}