iPhone не отвечает на события клика

Question

Я сделал веб-приложение, которое в настоящее время работает, как и предполагалось, на всех устройствах, кроме iPhone. Я сделал модальное окно, которое будет предлагать пользователю щелкнуть в любом месте экрана, чтобы приложение go стало полноэкранным, однако, если используется iPhone, никакого взаимодействия не произойдет. Я испробовал несколько онлайн-решений, но пока не добился успеха.

HTMl / CSS

<!-- The Modal -->
<div id="myModal" class="modal" style = "cursor: pointer;" onClick="">

  <!-- Modal content -->

  <div class="modal-content" style = "cursor: pointer;" onClick="">
    <span class="close" onClick="">&times;</span>
    <p style ="text-align: center">Tap Anywhere to Begin</p>
  </div>

</div>

  <div id="Position" style="visibility:hidden; height: 0px;"></div>
  <div style = "cursor: pointer;" onClick="">
  <button id="myBtn" style="visibility:hidden; cursor: pointer;" onClick=""></button>
  </div>

CSS

/* The Modal (background) */
.modal {
   /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  cursor: pointer;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  cursor: pointer;
}


.close{
    cursor: pointer;
}

Javascript

// Get the modal
$(window).on('load',function(){
         modal.style.display = "block";
    });
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// When the user clicks on <span> (x), close the modal
close.onclick = function() {
       var el = document.documentElement,
    rfs = el.requestFullscreen
      || el.webkitRequestFullScreen
      || el.mozRequestFullScreen
      || el.msRequestFullscreen 
  ;

  rfs.call(el);
  modal.style.height = "0px";
}

// When the user clicks anywhere outside of the modal, close it
modal.onclick = function(event) {
           var el = document.documentElement,
    rfs = el.requestFullscreen
      || el.webkitRequestFullScreen
      || el.mozRequestFullScreen
      || el.msRequestFullscreen ;
  rfs.call(el);

    modal.style.height = "0px";

}