Cordova/Phonegap app: position: fixed у header в iOS сбивается при вызове клавиатуры (input focus) — почему?
Есть приложение, сделанное при помощи Cordova/Phonegap.
В header с { position: fixed; top: 0; left: 0 } на странице поиска есть input. При когда у input срабатывает событие focus то iOS (а именно Mobile Safari) не смотрит на этот fixed, а просто изменяет viewport (если не ошибаюсь, то поведение при появлении клавиатуры именно такое) и соответственно header передвигается в другое место экрана, при этом при скроллинге страницы fixed свободно перемещается вместе со всем контентом (это все происходит при выдвинутой клавиатуре).
Если до фокуса не скроллить контент, то при фокусе input он никуда не убегает, но если попробовать скроллить контент, то header двигается вместе с ним.
Подскажите, возможно ли решить данную проблему без использования костылей?
Каким образом вы решали такую проблему?
В мобильных приложениях мы полностью отказались от `position:fixed`, так как это не только на подобные баги сказывается, но и на производительность в целом. Используйте `absolute` для позиционирования блоков. Можете `flexbox` модель попробовать.
Попробовали использовать flexbox model, но при этом на девайсах "деревянный скролл", плюс iOS 6 не видит свойства display: -webkit-box; Странно, так как везде пишут, что именно это свойство нужно для старых версий.
Конечно, скролл будет "деревянный", и здесь есть 2 выхода, или `-webkit-overflow-scrolling: touch` к контейнеру (но работает на старых платформах), или использовать что-то такое: iScroll 5.
Мы делаем так:
layout через `position:absolute` с позиционированием через javascript (подгоняем только высоту основной секции под девайс, которая должна быть "зажата" между хэдером и футером), а для скролла используем iScroll.
Ответ можно считать решением, если приложение работает на более свежих версиях любых OS, только что попробовал на Android 4.0.3 (Asus tablet) и там все очень печально со скроллом.
Простой