0

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):

enter image description here. 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.

Alexander Bolzhatov
  • 278
  • 3
  • 12

1 Answers1

0

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

Kolja
  • 1