Greetings!
We're currently optimizing our website to display well on iOS and have come across one particular issue: when an input field is activated/tapped/focused (whichever you may call it), the browser scrolls the page to that input field. The one we have on our website is located inside a pop-up, so when the input field gets in focus, the page underneath scrolls to the top. Apart from the page scroll, the pop-up itself appears to be shaking while the page is scrolling.
Essentially, my question is how we can prevent iOS Safari (iOS8 and iOS9, iOS7 seems to be working great!) from scrolling the page to the input field that get's in focus? What we need is no scrolling done whatsoever. We've tried many solutions including trying to disable the scroll alltogether or fetching the page offset value and trying to force-scroll the page to that value once the input field is activated.
You can see the demo of the website we're working on here: http://proem.esy.es.
To replicate the issue:
- Open the website on an iPhone running iOS 8 or 9
- Scroll down on the page, just so you're not at the very top
- Locate the phone icon in the header bar at the top of the page
- Click on it — the pop-up will slide out with the infamous input field
- Try ti type something in the input field. You'll see the page scroll to top and the pop-up jiggle around for a second.
Please help us out!
