Safari. Cursor in input of the form is near the input - ios

Question

I develop in Django framework. In IOS, Safari I have a bug with input cursor in markup like in this screenshot (cursor is outside input control when I type text in control):
. Other browsers look good - no bug. I have a following html code in my project:
<form id="loginForm" name="authorization">
{% verbatim %}
<div class="error-message" ng-if="wrongUserPass" id="authErrorPath">{{ loginErrorMess }}</div>
{% endverbatim %}
<div class="form-group form-field-group_inline" ng-if="!user_is_authenticated && auth_step1">
<input class="form-field signinPhone with_ccode" id="id_phone" ng-model="loginForm.loginPhone" bad-gentlemen-mask="+7 (***) ***-**-**" autocomplete="off" name="phone" placeholder="телефон" type="text" my-enter="" value='' {% if mobile == True %} scroll-on-focus {% endif %} />
</div>
</form>
Cursor appears like here, but I don't understnand how to fix this issue.
Following css code (from chrome developer tools) corresponds input control with id=id_phone:
.form-field:focus, .form-field:hover {
box-shadow: 0 6px 10px rgba(0,0,0,.1);
}
#media (max-width: 767px) {
.login__mobile .form-field {
width: 260px!important;
margin: 0 auto;
}
}
#media (max-width: 767px) {
.login__mobile .form-field {
padding: 6px 10px!important;
}
.login__mobile .form-field {
padding: 0 12px!important;
border-radius: 6px;
}
}
#media (max-width: 767px) {
.form-field {
font-size: 1.5rem;
}
.form-field {
border: 3px solid #dfecf5;
border-radius: 10px;
font-size: 2.083333333333333rem;
font-weight: 300;
padding: 5px 12px;
width: 100%;
outline: 0;
-webkit-transition: all .3s ease;
transition: all .3s ease;
background-color: #fff;
color: #31323a;
}
.form-field, .form-label_block {
display: block;
}
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
line-height: normal;
}
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
padding: 1px 0px;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
.login__mobile {
color: #fff;
display: none;
padding: 0;
}
.navbar_menu-show .top-menu_mobile {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.top-menu_mobile {
display: none;
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 100%;
padding: 5px 15px;
z-index: 1000;
background-color: rgba(0,0,0,.9);
-webkit-transition: all.3s ease;
-o-transition: all.3s ease;
transition: all .3s ease;
text-align: center;
overflow: scroll;
}
body, html {
font: 400 12px 'Open Sans',sans-serif;
line-height: 1.333333333333333;
color: #1e252b;
overflow-x: hidden;
}
body, html {
font: 400 12px 'Open Sans',sans-serif;
line-height: 1.333333333333333;
color: #1e252b;
overflow-x: hidden;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Please, help, who knows. Thanks.

Answer 1

Privet Alexander, I had the same problem. This is an iOS bug that occurs if your <input> field is in a container (div etc) with the css property position: fixed. I had my <body> tag css'ed with position: fixed and had to change it to something else, i.e. to position: absolute.
Some other workarounds are described here:
https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8