Question regarding input focus "scroll into view" behaviour

I’m working on an Ionic 3 app that’s somehow ended up with some very strange scrolling behaviour when I focus on input fields… To make it even more strange, this only happens on one page in my app.

Unfortunately I have been unable to reproduce this behaviour in any other apps and the app itself is proprietary, so I can’t share my code.

There is one interesting point that I discovered just now though: if I set focus to an input field using document.getElementsByTagName("input")[0].focus(), then it shows my keyboard and scrolls into view exactly as it should, but when I tap on the input field on my device screen, it scrolls down by approximately 50px.

As far as I can tell, the same thing happens on both Android and iOS, and only on one page of my app. I have no fancy focus or “tap” event listeners configured, so there’s no custom code (that I know of) that might be overriding or interfering with the focus event. I’ve tried setting an “Event Listener Breakpoint” on the “scroll” event as well as a manual breakpoint in the scrollCallback function of ScrollView.prototype.enableNativeScrolling() in ionic-angular/util/scroll-view.js, but all that helped me work out is that when the page is scrolled all the way to the top, tappng an input field sometimes makes it scroll correctly and sometimes doesn’t trigger a scroll at all. Meanwhile, when not scrolled to the very top of the page, it always makes it scroll down slightly instead.

I do realise this will be really difficult to debug without being able to share my code, but could someone perhaps just point me in the right direction with regards to working out what might be causing this behaviour? What could/should I check here?

In the interest of not leaving this issue open endlessly, the project in question here was touched by numerous people who were very new to web development and I was trying to work around issues that shouldn’t have existed in the first place…

I ended up creating a new Ionic 3 app for this with logical UI elements, then simply porting the business logic across, after which this issue (and many others) disappeared.

1 Like