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

Support
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