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

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