在全屏模式下，IE11变黑

Question

我正在为IE11开发一个程序，我希望它能使用全屏API (https://davidwalsh.name/fullscreen)在全屏模式下运行。最初我有一个问题，IE11在全屏模式下阻止页面滚动，但用这个答案- IE cannot scroll while in fullscreen mode解决了这个问题。然而，现在当IE11进入全屏模式时，除了按钮图像外，整个页面都会变成黑色。我尝试通过添加background-color: #ffffff;和设置overflow:auto;来编辑body css，但都不起作用。我将感谢任何关于如何在全屏模式下纠正背景颜色问题的想法。

我已经按要求添加了一个代码示例，但不幸的是，它看起来像是堆栈溢出代码片段禁用了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;
}