IE11 turns black when in full screen mode

Question

I am developing a program for IE11 and I would like it to run in fullscreen mode using Fullscreen API (https://davidwalsh.name/fullscreen). Initially I had the issue that IE11 prevented the page from scrolling when in fullscreen mode, but solved that with this answer - IE cannot scroll while in fullscreen mode. However, now when IE11 enters fullscreen mode the entire page turns black except button images. I have tried editing the body css by adding background-color: #ffffff; and setting overflow:auto; but nothing works. I would appreciate any ideas about how to correct the background color issue in fullscreen mode.

I have added a code sample as requested but unfortunately it looks like the stackoverflow code snippet disables Fullscreen API, and neither Codepen nor JSFiddle seem to work in IE11. Open to suggestions for how to test this code snippet across browsers.

function startExperiment() {
  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
    }
  }
  var entire_page = document.documentElement; //entire page (for Chrome/FF)
  goFullScreen(entire_page);

  proceed();
}

function proceed() {
  $("#participantInfoSheet").show();
  $("#firstScreen").hide();
}

function checkBoxes() {
alert("box checked");
}

html,
body {
  height: 100vh;
  width: 100vw;
}

body {
  margin: 0;
  background-color: #ffffff;
  backface-visibility: hidden;
  padding: 0px;
  text-align: center;
  font-family: "Arial";
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstScreen">
  <div id="introText">
    <br><br><br><br> The next page will run in full-screen mode.<br> When you are ready, click the START button.<br><br>
    <button type="button" id="startExperimentButton" style="display:inline" onclick="startExperiment()">START</button>
  </div>
</div>

<div id="participantInfoSheet" style="display:none; margin-left:10%; margin-right:10%;">
  <br><br><br><br><br><br><br><br><br><br><br><br>More information is listed here. This is the page that turns black in full screen mode. <br><br><br>
  <input type="button" onClick='window.print()' value='Print' /> <br><br>
  <br><input type="checkbox" id="infoSheetCheckbox" onclick="checkBoxes()"> Users must check this box.<br><br>
</div>

I try to make a test with this code in IE 11. https://textuploader.com/1awna Here is the result. https://i.postimg.cc/sgmKtSPZ/29.gif You can see that full screen code working fine and background remains same. So it is not the issue with IE or full screen api. It looks like you have some issue with your code. If you are not able to find the issue in your code than I suggest you to post your sample code. We will try to check your code and try to find the cause for the issue. — Deepak-MSFT, Jan 31 '19 at 01:36
Thanks @Deepak-MSFT, I have added a code sample but the snippet doesn't seem to allow Fullscreen API so I'm not sure how to test it — j45612, Jan 31 '19 at 13:49

score 0 · Answer 1 · answered Feb 01 '19 at 09:05

0

I try to make a test with your code and find that code below is causing issue in IE 11.

if (element === document.documentElement) {
        //check element
        element = document.body; //overwrite the element (for IE)
      }

You need not to overwrite element for IE. I simply try to remove that code and IE is working fine now. Below is my testing result with your code.

Output:

answered Feb 01 '19 at 09:05

Deepak-MSFT

10,379
1
12
19

Thank you for your attention to my problem. Unfortunately removing the code you suggested leaves me again with a page that won't scroll. It seems I am stuck between the two errors – j45612 Feb 05 '19 at 16:18

score 0 · Answer 2 · answered Apr 22 '20 at 04:39

0

I also had a similar issue. I was able to fix it by applying a background color to html

html {
    width: 100%;
    height: 100%;
    background-color: #F7F7F7;
}

answered Apr 22 '20 at 04:39

coder

8,346
16
39
53

IE11 turns black when in full screen mode

2 Answers2