How to do normal form filling in Safari?

Question

safari

I made a form on the site that appears on click in the menu. The basis of form positioning is position:fixed;
Since on phones / tablets, when filling out a form, the keyboard opens and various actions occur, apple's actions do not have a very good effect on this form.
It's ok on android. But on the iphone and ipad, when you try to enter something into the form, the cursor flies to an empty place.
Or just the site overlaps the form. Because on the iphone where the screen of a small menu fits on top.
Here is the main css code:

.drop-menu2 {
  	position: relative;
    z-index: 9999;
  }
  .drop-menu2 a span {
  	cursor: pointer;
  }
  	.drop-menu2 #wrapper_form {
  		border: 1px solid #028AFF;
  		background-color: white;
  		border-radius: 10px;
  		display: none;
  		padding-top: 20px;
  		position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -220px;
      margin-left: -160px;
      height: 440px;
  		width: 320px;
      z-index: 9999;
  	}
      .drop-menu2 #wrapper_form label {
        display: none;
      }
  		.drop-menu2 form {
  			width: 80%;
  			margin:auto;
  			margin-top: 10px;
  		}
  			.drop-menu2 form input[type=text] {
  				border-radius: 4px;
  				border: 1px solid #CCCCCC;
  				box-sizing: border-box;
  				height: 35px;
  				margin-bottom: 7px;
  				padding-left: 7px;
  				width: 100%;
  			}
  			#for_name_email, #for_mobphone {
  				display: inline-block;
  				margin-bottom: 10px;
  				width: 49%;
  			}
  			.drop-menu2 form textarea {
  				border-radius: 4px;
  				height: 130px;
  				width: 100%;
  			}
  			.drop-menu2 form p {
  				text-align: center;
  			}
  			.drop-menu2 form p  span{
  				border-bottom: 1px dashed #515157;
  				cursor: pointer;
  			}
  			.drop-menu2 form #mobphone + label {
  				margin-top: 15px;
  			}
  			.drop-menu2 button {
  				display: block;
  				margin: 10px auto;
  				margin-top: 13px !important;
  			}

And some html:

<div id="wrapper_form">
  <form>
  <label><span class="guardsman">*</span>Фамилия</label>
  <input id="name_question" value="" placeholder="* Фамилия" type="text">
  <label><span class="guardsman">*</span>Имя</label>
  <input id="name_question" value="" placeholder="* Имя" type="text">
  <label><span class="guardsman">*</span>Отчество</label>
  <input id="name_question" value="" placeholder="* Отчество" type="text">
  <div id="for_mobphone"><label><span class="guardsman">*</span>Телефон</label>
  <input id="mobphone" value="" placeholder="8 [phone]" type="text"></div>
  <div id="for_name_email"><label><span class="guardsman">*</span>Email</label>
  <input id="name_email" value="" placeholder="[email protected]" type="text"></div>
  <label><span class="guardsman">*</span>Ваш вопрос:</label>
  <textarea maxlength="1000" placeholder="Текст вопроса"></textarea>
  <button class="btn btn-primary"><span>ЗАДАТЬ ВОПРОС</span></button>
  <p><span>Закрыть</span></p>
  </form>
</div>