M
M
Menjoy2014-04-10 13:48:01
css
Menjoy, 2014-04-10 13:48:01

Cordova/Phonegap app: position: fixed on header in iOS gets stuck when keyboard is called (input focus) - why?

I have an application made with Cordova/Phonegap.

In header with { position: fixed; top: 0; left: 0 } there is an input on the search page. When the input fires the focus event, then iOS (namely Mobile Safari) does not look at this fixed, but simply changes the viewport (if I'm not mistaken, this is the behavior when the keyboard appears) and, accordingly, the header moves to another place on the screen, while scrolling of the fixed page moves freely along with all the content (this all happens with the keyboard extended).

If the content is not scrolled before the focus, then when the input is focused, it does not run away anywhere, but if you try to scroll the content, the header moves with it.

Tell me, is it possible to solve this problem without using crutches?
How did you solve such a problem?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Keith, 2014-04-10
@Menjoy

In mobile applications, we completely abandoned `position:fixed`, as this affects not only such bugs, but also performance in general. Use `absolute` to position blocks. You can try the `flexbox` model.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question