Как сделать нормальное заполнение формы в Safari?

Question

[Александр]

На сайте сделал форму, которая появляется по клику в меню. Основа позиционирования формы это position:fixed;
Так как на телефонах/планшетах при заполнении формы открывается клава и происходят различные действия, то apple'овские действия не очень хорошо влияют на эту форму.
На андроиде нормально. Но на iphone и ipad при попытке ввести в форму что-то, курсор улетает в пустое место.
Или просто сайт перекрывает форму. Т.к. на iphone где экран небольшой меню налезает сверху.
Вот основном код css:

.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;
  			}

И 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="[e-mail]" 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>