Fixed Unfortunate positioning of "Go to page" menu on touch devices

[Steffen]

Affected version

2.0.7

Clicking the "1 of x" button in the pagenav on mobile devices autofocuses the page number input field which in turn causes the virtual keyboard to occupy the lower part of the screen. Depending on the position of the "1 of x" button in the visual viewport, the positioning of the "Go to page" menu on touch devices can be unfortunate. I've attached 3 videos.

Video 1: The "1 of x" button exists in the upper half of the screen. The browser can show the virtual keyboard without autoscrolling the input field into view. Everything is fine.

Video 2: The "1 of x" button is in the lower half of the screen. When the browser shows the virtual keyboard it has to autoscroll the page to keep the input field visible. This works okayish: half of the menu gets hidden befind the fixed header. Maybe something can be done?

Video 3: The "1 of x" button is at the very bottom of the screen. Clicking it makes the virtual keyboard appear but no scrolling happens at all. The whole popup is hidden behind the virtual keyboard. I cannot reproduce this issue with a simple demo HTML file so this most likely isn't a general browser issue. Maybe there is an issue with how XenForo adds this input field to the DOM? Maybe it gets repositioned such that Chrome gets confused?

The browser is Chrome 67 on Android 8.1 using a Nexus 5X.

 

[Chris D]

I can reproduce this. There are, unfortunately, some issues apparently in Chrome with this kind of stuff; one of which was only fixed in Chrome 67 related to scrolling a focused input into view especially inside fixed elements. Unfortunately it doesn’t solve this problem which seems to be related to how the focus happens automatically after the menu is opened.

The good news is, I’ve come up with something which seems to work by listening to the window resize event and the input focus event and a small timeout (yuck). When this happens, we scroll the input into view if it isn't already visible. It isn't pretty, but it solves the problem.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies