Как починить position fixed баг при вызове клавиатуры?

Question

[Павел]

При фокусе на input все position: fixed элементы перестают быть fixed и скроллятся вместе со страницей.

Как починить это? Баг замечен только на iOs-устройствах

Answer 1

[Константин]

Корень проблемы в том, что в концепцию тач-интерфейса фиксированно спозиционированные элементы не очень хорошо вписываются.
Единого решения этого бага нет, есть небольшой список рекомендаций от человека, потратившего много усилий на решения проблем зафиксированных элементов на тач-устройствах, который можно сократить до одного пункта: не используйте элементы с position: fixed в скроллируемых элементах.
Возможно, можно пересмотреть ui сайта и отказаться от зафиксированных элементов, либо скроллить не всю страницу, а некий контейнер, рядом с которым и находится зафиксированный элемент.
А, возможно, стоит прекратить обращать внимание на это поведение: оно уже привычно для пользователя и от того вполне легально.

Comments

[Павел]

Спасибо. Почитаю, конечно те статьи, но...
С привычностью все ок, только вот фиксированный элемент не всегда встает туда, куда нужно, и получаются некрасивые отступы.
Решением проблемы в моем случае оказалось банальная смена класса при фокусе и расфокусе. Когда класс добавлен, fixed-элемент становится absolute, ставится ему вполне конкретное положение, и все довольны.

Answer 2

[Павел]

"Решением проблемы" в моем случае оказалось банальное добавление класса при фокусе на input'ах и textarea, и, соответственно, удаление этого класс при расфокусе.
Когда класс добавлен, fixed-элемент становится absolute, ставится ему вполне конкретное положение, и все довольны.
Это применили на продакшене, так как долгий гуглеж привел к тому, что fixed правильно работать не будет, и это точка. А из-за того,что fixed сам становится в странное положение по осям x и y, было решено это обозначить "железно", через добавление класса. В итоге, фиксированная шапка при фокусе на инпутах, упрыгивала на самый верх страницы, становясь absolute;