Материализация разборно-гармошка не работает IOS 13

Question

Моя проблема

Я работаю над сайтом, который использует materialize sidenav .

Когда я пытаюсь открыть складную гармошку на моем iphone 7 (IOS 13.3.1) в Safari он не работает.

Но когда я пробую его в другом браузере, например firefox, он работает хорошо.

Решение, которое я нашел на github , не сработало для меня.

Я понятия не имею, как решить мою проблему

Любые подсказки / подсказки приветствуются.

Заранее спасибо.

Мой код

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    // var options = 
    var instances = M.Dropdown.init(elems, {coverTrigger: false});
  });
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
    $(document).ready(function() {
  $('.collapsible').collapsible();
})

input:focus {
  border-bottom: 1px solid #1C9CDA !important;
  box-shadow: 0 1px 0 0 #1C9CDA !important;
}
label.active {
  color: #1C9CDA !important;
}
.standard-bgcolor{
  background-color: #1C9CDA !important;
}
.standard-color{
  color: #1C9CDA !important;
}
.sidenav{
  z-index:1001 !important;
}
.nav{
  padding-left: 16px !important;
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
html, body {
    margin: 0;
    height: 100%;
}
#map{
    height:100%;
    width: 100%;
}
.dropdown-content{
   width: max-content !important;
   height:auto !important;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  position: absolute !important;
  bottom: 23px;
  right: 20px;
  width: 200px;
}
#form_btn{
  float: none;
  clear: both;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
  margin-bottom: 0 !important;
}

/* Add styles to the form container */
.form-popup{
  max-width: 400px;
  min-width: 300px;
  width: 25%;
}
/*form box*/
.form-container {
  padding: 20px !important;
  background-color: white;
}
.login{
  display: inline;
  font-size: 30px;
}
.Sign-up, .Sign-up:visited{
  cursor: pointer;
  font-size: 24px;
  text-decoration: underline;
  float: none !important;
  clear: both;
}
#form_full{
  background-color: white;  
  width: 100%;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 20%;
  opacity: 0.9;
}
#Sign-up{
  font-size: 25px;
  text-transform: capitalize;
  height: 50px;
  width: auto;
  position: absolute;
  right: 50%;
  border-radius: 10px;
}
.not-a-user{
  font-size: 24px;
  color: #707070;
}
.Cancel{
  font-size: 35px;
  color: #707070;
}
.Sign-up_Cancel{
  font-size: 35px;
  text-decoration: underline;
}
#row_link{
  margin-left:  0;
}
.alert {
  position: relative;
  width: 100%;
  padding: 15px;
  background-color: #f44336;
  color: white;
  text-align: center;
}
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
#login_alert{
  top: 0;
}
/*table with gps trackers*/
.Assets{
  width: calc(100% - 100px);
  margin: 0px 50px 0px 50px;
}

.link{
  color: #1a9988;
}
.link:hover{
  color:  #0f7567;
}
/*popup add assets style*/
/* The Modal (background) */
.add_assets {
  left: 0;
  top: 10%;
  width: 100%; /* Full width */
  height: auto; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  max-height: none !important;
  padding-bottom: 30px !important;
}
#submit{
  font-size: 25px;
  text-transform: capitalize;
  height: 50px;
  width: 20%;
  position: absolute;
  right:30px;
  border-radius: 10px;
}
#Cancel_add{
  font-size: 25px;
  text-transform: capitalize;
  height: 50px;
  width: 20%;
  position: absolute;
  left:30px;
  border-radius: 10px;
  background-color: #f44336;
}
.animate {
  -webkit-animation: animatezoom 5s;
  animation: animatezoom 5s
  background-color: #fefefe;
}
/*blockquote*/
.blockquote_white {
  border-left-color: white;
}
/*info_box*/
.info_box{
  height: auto;
  max-height: 100%;
  overflow: auto;
  padding:  0 25px 0 25px;
}
/*routing box*/
.leaflet-routing-alternatives-container, .leaflet-bar{
  display: none;
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
@media only screen and (max-width: 600px) {
  .Assets::-webkit-scrollbar {
    z-index:10;
  }
  /*asset table*/
  .Assets{
    width: 100%;
    margin: 0px 0px 0px 0px;
  }
  #submit, #Cancel_add{
    width: auto;
  }
  .modal-content{
    padding: 0;
  }
  #form_full{
    width: 100%;
    left: 0;
  }
  #Sign-up{
    width: auto;
    right: 10px;
  }
  .Cancel{
    margin-left: 10px;
  }
  #e-mail, #password, #name , #GPS_ID, #info{
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<ul id="dropdown1" class="dropdown-content">
    <li><a title="Add Asset" class="modal-trigger grey-text text-darken-1" href="#modal1"><i class="material-icons">add</i>Voeg asset toe</a></li>
    <li><a title="Edit profile" class="modal-trigger grey-text text-darken-1" href="#modal2"><i class="material-icons left ">person</i>Edit profile</a></li>
</ul>
 <ul class="sidenav" id="mobile-demo">
 	<li class="sidenav-header standard-bgcolor ">
        <div class="row">
        	<div class="col s4">
            	<h4 class="white-text">Asset tracking</h4>
            </div>
        </div>
    </li> 
    <li class="no-padding nav">
	    <ul class="collapsible collapsible-accordion">
	    	<li>
		      	<a class="collapsible-header"><i class="material-icons left">home</i>Home<i class="material-icons right">arrow_drop_down</i></a>
		  		<div class="collapsible-body">
		            <ul>
				        <li><a title="Add Asset" class="modal-trigger grey-text text-darken-1" href="#modal1"><i class="material-icons">add</i>Voeg asset toe</a></li>
    					<li><a title="Edit profile" class="modal-trigger grey-text text-darken-1" href="#modal2"><i class="material-icons left ">person</i>Edit profile</a></li>
				    </ul>
		        </div>
	        </li>
	    </ul>
	</li>
	<li><a class="nav" title="Map" href="index.php"><i class="material-icons">map</i>Kaart</a></li>
    <li><a class="nav" title="Uitloggen" href="?logout=1"><i class="material-icons left">exit_to_app</i>Uitloggen</a></li>  	
  </ul>
  <nav>
    <div class="nav-wrapper standard-bgcolor">
    	<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    	<a href="#" class="brand-logo center">Asset Tracking</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
		<li class="active"><a title="Home" class="dropdown-trigger" data-target="dropdown1" href="#!"><i class="material-icons left">home</i>Home<i class="material-icons right">arrow_drop_down</i></a></li>
      	<li><a title="Map" href="index.php"><i class="material-icons left">map</i>Kaart</a></li>
      </ul>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
      		<li class="right"><a title="Uitloggen" href="?logout=1"><i class="material-icons right">exit_to_app</i>Uitloggen</a></li>
      </ul>
    </div> 
  </nav>
<body>
<!-- add asset form -->
	<div id="modal1" class="modal add_assets modal2">
	  <div class="modal-content">
	  	<h4 class="standard-color">Voeg asset toe</h4>
		  <form class="col s12 animate" action="" method="post">
		   	<div class="row">
				<div class="input-field col s12" id="name">
					<input class="validate" type="text" required name="name">
	          		<label for="Name">Asset name</label>
	          		<span class="helper-text" data-error="Veld mag niet leeg zijn" data-success="correct">Geef de GPS tracker een naam</span>
				</div>
			<div class="row">
				<div class="input-field col s12" id="activatiecode">
					<input class="validate" type="text" required name="activatiecode">
	          		<label for="activatiecode">Activatiecode</label>
	          		<span class="helper-text" data-error="Moet uniek zijn" data-success="correct">Activatiecode van de tracker (IMEI + korte activatie string)</span>
				</div>
			</div>
			<div class="row">
				<div class="input-field col s12" id="info">
					<input class="validate" type="text" required name="info">
	          		<label for="Info">Other gps info</label>
	          		<span data-error="Veld mag niet leeg zijn" data-success="correct" class="helper-text">Extra info over de GPS</span>
				</div>
			</div>
		     <div class="input-group">
	      		<button id="submit" class="btn waves-effect standard-bgcolor" type="submit" name="submit">Add</button>
	    	</div>
	      		<button id="Cancel_add" type="button" class="btn waves-effect  modal-close" >Cancel</button>
	    	</div>
		  </form>
		</div>
	</div>
		<!-- Update profile form -->
	<div id="modal2" class="modal add_assets modal2">
	  <div class="modal-content">
	  	<h4 class="standard-color">Update account</h4>
		  <form class="col s12 animate" action="" method="post">
		   	<div class="row">
				<div class="input-field col s12" id="name">
					<input value="<?=$email?>" class="validate" type="email" required name="email">
	          		<label for="Name">E-mail Address</label>
	          		<span class="helper-text" data-error="Geen correct e-mailadres" data-success="correct">voorbeeld@voorbeeld.nl</span>
				</div>
			<div class="row">
				<div class="input-field col s12" id="password">
					<input minlength="10" required type="password" class="validate" name="password_1">
			        <label for="Password">Password</label>
			        <span class="helper-text" data-error="Wachtwoord is te kort" data-success="correct">10 karakters lang</span>
				</div>
			</div>
			<div class="row">
				<div class="input-field col s12" id="password">
					<input minlength="10" required type="password" class="validate" name="password_2">
	        		<label for="Password">Confrim password</label>
	        		<span class="helper-text" data-error="Wachtwoord is te kort" data-success="correct">10 karakters lang</span>
				</div>
			</div>
		     <div class="input-group">
	      		<button id="submit" class="btn waves-effect standard-bgcolor" type="submit" name="update">Update</button>
	    	</div>
	      		<button id="Cancel_add" type="button" class="btn waves-effect  modal-close">Cancel</button>
	    	</div>
		  </form>
		</div>
	</div>

Answer 1

Хорошо, для начала ваш JS не отформатирован должным образом. У вас есть 4 отдельные функции для работы с документами и набор ванильных JS и jQuery единиц. Выберите 1 и придерживайтесь его. Вам нужен только один готовый документ, а затем весь код, который должен дождаться загрузки dom, находится внутри.

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    // var options = 
    var instances = M.Dropdown.init(elems, {coverTrigger: false});
  });
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
    $(document).ready(function() {
  $('.collapsible').collapsible();
})

Я убрал это и поместил ваш код в кодовое место, и он отлично работает хорошо для меня (iPhone XR 13.3.1 Safari). Вы можете написать это?

document.addEventListener('DOMContentLoaded', function() {

    var modals = document.querySelectorAll('.modal');
    var modal = M.Modal.init(modals);

    var triggers = document.querySelectorAll('.dropdown-trigger');
    var trigger = M.Dropdown.init(triggers, {coverTrigger: false});

    var sidenavs = document.querySelectorAll('.sidenav');
    var sidenav = M.Sidenav.init(sidenavs);

    $('.collapsible').collapsible();

  });

https://codepen.io/doughballs/pen/QWbQPew