IE11 становится черным в полноэкранном режиме

Question

Я занимаюсь разработкой программы для IE11, и мне хотелось бы, чтобы она работала в полноэкранном режиме с использованием полноэкранного API (https://davidwalsh.name/fullscreen).). Сначала у меня возникла проблема, заключающаяся в том, что IE11 предотвращал прокрутку страницы в полноэкранном режиме, но решил, чтос таким ответом - IE не может прокручиваться в полноэкранном режиме . Однако теперь, когда IE11 переходит в полноэкранный режим, вся страница становится черной, кроме изображений кнопок. Я попытался отредактировать body css, добавив background-color: #ffffff; иустановка overflow:auto;, но ничего не работает. Буду признателен за любые идеи о том, как исправить проблему с цветом фона в полноэкранном режиме.

Я добавил пример кода в соответствии с запросом, но, к сожалению, похоже, что фрагмент кода stackoverflow отключает полноэкранный режим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 работает нормально.Ниже мой результат тестирования с вашим кодом.

Вывод: