Mobile Keyboard covers interface, and does not allow the user to scroll

Support
1

This is still quite broken, and impacting my users on signup, login, and when creating/editing posts. I have watched this happen on both phones and tablets. I think at least one of the tablets was an iOS device, but I mostly observe this on Android.

My forum is geographically local, so I often get to observe people interacting with it in person.

I’m open to a CSS fix for now, and it would probably be good for a fix to make its way into core. I’ll update here if I find a solution.

2 Likes
3

Did you try Don:s CSS fix?

4

This is what worked for me (in my theme):

custom.scss:

.mobile-view .modal {
  top: 0;
  height: 100vh;
  align-items: flex-start;
}
.mobile-view .modal .d-modal__container {
  height: 100vh;
}

.mobile-view #reply-control.open {
  top: 0;
  height: 100vh;
}

common/head_tag.html:

  const is_mobile = !!document.querySelector('.mobile-view')
  if (window.visualViewport && is_mobile) {
    window.visualViewport.addEventListener('resize', () => {
      const modal = document.querySelector('.mobile-view .modal .d-modal__container');
      if (modal) {
        modal.style.maxHeight = `${window.visualViewport.height}px`;
      }
      const dialog = document.querySelector('.mobile-view #reply-control.open');
      if (dialog) {
        dialog.style.maxHeight = `${window.visualViewport.height}px`;
      }
    });
  }

These changes result in a much better UX:

  • the limited screen real estate is devoted to the task at hand (input fields) instead of being split between modal and background
  • fields don’t get hidden by the keyboard, with the user unable to scroll
  • the user doesn’t have to close, then open, then close, then open the keyboard to fill out all the fields
  • the user doesn’t have to type blindly into a field they cannot see

There’s still some inconsistency between browsers. The JS resize doesn’t appear to work in Chromium, but it does work in Brave and Firefox. But the Chromium experience is still better with the modals at the top of the screen, where the keyboard isn’t.

Why pure CSS approaches didn’t work:

  • I don’t think env(keyboard-inset-height) works outside of PWA’s on iOS
  • 100dvh in theory would work but doesn’t seem to be supported yet in my mobile browser

I also heard from people that they couldn’t find the signup button. So:

Display signup button all the time, don’t hide it on mobile:

.panel .header-buttons .sign-up-button {
  display: inline-flex;
}

All of these issues were preventing people from signing up for the forum, and from making their first post. So while it may sound simple, for me at least these were extremely high priority fixes.

1 Like
5

I will have to try both sets of code to test. As I have this issue when editing form templates or using the theme editor for CSS/html. I figured a workaround for those by adding a bunch of empty lines. These CSS fixes look much better.

6

I think the team is already working on that

2 Likes
7

It’s good it’s getting attention… But as I mentioned dvh does not work in my testing.