Focusing on input in modal on mobiles scrolls the page up and makes the modal invisible

[meglio (Anton)]

I’ve been able to reproduce this issue for a long time now. To me it looks like a UX bug.

The impact is that it is hardly possible to use modal dialogs in mobile mode, i.e.:

• split topics, both moving messagins to an existing or to a new topic
• flag topics with “other” reason and a personal note
• some other actions

In all these cases, here is what happens.

1. A modal dialog opens. For example, after I select a few messages in the middle of a long topic and is about to split them into an existing topic

2. I touch the input to enter the search keyword. The dialog disappears and I can only see the gray background, which is an overlay layer behind the modal and on top of the website.

3. Because the layout is transparent, I can notice how the page got scrolled behind the overlay.

4. In order for the dialog to appear again, I have to click on the “Done” button, which is part of my iPhone keyboard. The keyboard then gets hidden and I can see the dialog again, but the input is unfocused.

5. I touch the input to let it gain focus again. But then 2, 3 and 4 repeats until the topic scrolls up to the very top, so that no more scrolling is possible. The longer the topic, the more times I have to focus / blur the input.

6. Finally, when there is no more content to scroll to, the dialog will not disappear anymore, and I can do what I intended to.

This makes moderation hardly possible from mobile.

[codinghorror (Jeff Atwood)]

This is a duplicate of the iPad issue, replicable with search in a topic. You better be at the top of the topic, or you are hosed.

Search bar disappears on iPad in long topics

Let me know if you can also reproduce this. So far I’ve tested on iPad Air 2, Safari and Chrome: Go to a topic long enough that you need to load a new batch of posts Scroll to the bottom of the topic Click the search button, then click the search field to invoke the virtual keyboard The keyboard should go off-screen Won’t work on mobile because we immediately go straight to full-screen search there.