[Edit: Rephrased after some trial and error]
On my website I have a long list of div boxes each with a text fields (input type="text") that are located under a sticky header with a rather large height.
But when I touch the text fields on my mobile (Android) the browser pushes the element in focus under the sticky header. So the users don't see it anymore. But there is enough space between the soft keyboard and the header for one box.
See screenshots:
Situation when the page has loaded
Situation after I have touched the first text field
I have tried various things to stop the shift temporarily.
e.g. by fixing the position of body
It seems to me that the shift is not actually scrolling but another type of event. What is it? Where is it specified? And most importantly how can I control where the browser moves everything?
Thanks for any hint. Even where to look for a solution.
