IE cannot scroll while in fullscreen mode

Question

I have just found out that IE 11 cannot scroll when it is put into fullscreen mode by Fullscreen API.

if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
}

Fullscreen API and scrolling works fine in Chrome and Firefox. When IE 11 is put into fullscreen mode by pressing F11 it works fine.

I have tried to find documentation about this, but without luck. Has anyone else encountered this problem? Or knows what I might be doing wrong?

Answer 1

if you want the entire page fullscreen the solution is to send "document.body" for IE11 and "document.documentElement" for Chrome and Firefox. function example:

function goFullScreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    }
    else if (element.msRequestFullscreen) {
        if (element === document.documentElement) { //check element
            element = document.body; //overwrite the element (for IE)
        }
        element.msRequestFullscreen();
    }
    else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    }
    else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    else {
        return; //if none are supported do not show message
    }
    //show user message (or something else)
}
var entire_page = document.documentElement; //entire page (for Chrome/FF)
goFullScreen(entire_page);

and apply this css, because elements scroll (except root) is disabled in fullscreen by default (this is the standard) https://bugzilla.mozilla.org/show_bug.cgi?id=779286#c8

body {
    overflow: auto;
}

or a more readable version "body:-ms-fullscreen { overflow: auto;}"

Tested on IE11, Firefox 49, Chrome 56 and Chrome Android. I did not tested this code on Edge.

---

P.S. some additional style fixing for IE11 and Chrome

In Chrome if you don't have the body white background color some white bars will appear on the margins of the page. to fix this use:

:-webkit-full-screen {
    background-color: somecolor; /* same color as body */
}

In IE11 if you have some elements floating absolute/fixed positioned to the right side of the screen (example ".right_menu {position: fixed; right: 0;}") then are overlayed over the scrollbar. to fix this you can use:

:-ms-fullscreen .right_menu {
    margin-right: 17px; /* width of IE scrollbar */
}

more about how to style fullscreen: https://davidwalsh.name/fullscreen