IE11在全屏模式下会变黑

Question

我正在为IE11开发一个程序，我希望它使用全屏API（https://davidwalsh.name/fullscreen）以全屏模式运行。最初，我遇到的问题是，在全屏模式下IE11阻止了页面滚动，但是使用此答案-IE cannot scroll while in fullscreen mode解决了该问题。但是，现在IE11进入全屏模式时，除按钮图像外，整个页面都变成黑色。我尝试通过添加body并设置background-color: #ffffff;来编辑overflow:auto; CSS，但是没有任何效果。对于在全屏模式下解决背景色问题的任何想法，我将不胜感激。

我已按要求添加了一个代码示例，但不幸的是，它看起来像stackoverflow代码段禁用了Fullscreen API，并且Codepen和JSFiddle似乎都无法在IE11中工作。开放有关如何在浏览器之间测试此代码段的建议。

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>

Answer 1

我尝试用您的代码进行测试，发现下面的代码在IE 11中引起了问题。

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

您无需覆盖IE的元素。我只是尝试删除该代码，IE现在可以正常工作。以下是我的测试结果以及您的代码。

输出：

Answer 2

我也有类似的问题。我可以通过将背景颜色应用于html

来解决此问题

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