Carduelis
@Carduelis
Web-developer, front-end, js, less

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

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

Как починить это? Баг замечен только на iOs-устройствах
  • Вопрос задан
  • 2262 просмотра
Решения вопроса 2
@unity_ultra_hardcore
Корень проблемы в том, что в концепцию тач-интерфейса фиксированно спозиционированные элементы не очень хорошо вписываются.
Единого решения этого бага нет, есть небольшой список рекомендаций от человека, потратившего много усилий на решения проблем зафиксированных элементов на тач-устройствах, который можно сократить до одного пункта: не используйте элементы с position: fixed в скроллируемых элементах.
Возможно, можно пересмотреть ui сайта и отказаться от зафиксированных элементов, либо скроллить не всю страницу, а некий контейнер, рядом с которым и находится зафиксированный элемент.
А, возможно, стоит прекратить обращать внимание на это поведение: оно уже привычно для пользователя и от того вполне легально.
Ответ написан
Carduelis
@Carduelis Автор вопроса
Web-developer, front-end, js, less
"Решением проблемы" в моем случае оказалось банальное добавление класса при фокусе на input'ах и textarea, и, соответственно, удаление этого класс при расфокусе.
Когда класс добавлен, fixed-элемент становится absolute, ставится ему вполне конкретное положение, и все довольны.
Это применили на продакшене, так как долгий гуглеж привел к тому, что fixed правильно работать не будет, и это точка. А из-за того,что fixed сам становится в странное положение по осям x и y, было решено это обозначить "железно", через добавление класса. В итоге, фиксированная шапка при фокусе на инпутах, упрыгивала на самый верх страницы, становясь absolute;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы