Как убрать баг инпута на iPhone?

Question

[Максим]

Здравствуйте. Возникла проблема с отображением курсора на инпуте. Почему-то при нажатии на инпут курсор уходит вниз, будто инпут прозрачный и увеличивает свою высоту.

Баг только на айфоне.
Забыл указать - баг именно в popup-окне, в обычной форме нет.

Answer 1

[seroy]

iOS 11 bug https://hackernoon.com/how-to-fix-the-i...
У себя решил тем что ставлю:

body {
   postion: fixed;
}

При открытии формы на iOS, а после убираю.

Comments

[freekir]

А если форма не умещается на экране, она же получается двигаться при скроле не будет больше, а если будет, то скрол будет убегать?

[seroy]

Для popup окна в котором открывается форма нужно установить overflow-y: auto;
Тогда если форма не умещается на экране будет прокрутка.

У меня popup окно реализовано следующим образом:

.popup {
    display: block;
    visibility: visible;
    position: fixed;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    top: 50vh;
    left: 50vw;
    margin-right: -50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 9999;
}

[Иван Елефтериади]

Спасибо, бро, помог очень )

Answer 2

[Ankhena]

Почему смещается активная область на ios?

Answer 3

[vasyaproject]

Это бок айфонов, решается просто фиксированием слоя, но у кого не получится, то попробуйте через Javascript решить, который представлен на этом сайте dumajkak.ru/kak-nastroit-kursor-na-ios-11-na-onlaj... Там еще три варианта решений.
Я пробовал так:

.modal-open {
     position: fixed!important;
}

А потом еще попробовал так:

body.has-fullscreen-modal {
  position: fixed;
}

<script>
var savedScrollPosition = $(window).scrollTop()
$('body').addClass('has-fullscreen-modal')
 
$('body').removeClass('has-fullscreen-modal')
window.scrollTo(0, savedScrollPosition)
</script>

Надеюсь поможет кому-то