Мобильная клавиатура перекрывает интерфейс и не позволяет пользователю прокручивать страницу

Поддержка
1

Это всё ещё работает некорректно и влияет на моих пользователей при регистрации, входе в систему, а также при создании и редактировании постов. Я наблюдал эту проблему как на телефонах, так и на планшетах. Думаю, хотя бы один из планшетов был устройством iOS, но в основном я вижу это на Android.

Мой форум имеет локальный характер, поэтому я часто могу наблюдать за тем, как люди взаимодействуют с ним вживую.

Я открыт к решению через CSS на данный момент, и было бы хорошо, если бы исправление попало в основную версию. Я обновлю эту тему, если найду решение.

3

Вы пробовали CSS-исправление от Don?

4

Вот что сработало для меня (в моей теме):

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`;
      }
    });
  }

Эти изменения значительно улучшают пользовательский опыт:

  • ограниченное пространство экрана отводится под текущую задачу (поля ввода), а не делится между модальным окном и фоном
  • поля не скрываются клавиатурой, и пользователь может прокручивать страницу
  • пользователю не нужно закрывать, затем открывать, затем снова закрывать и открывать клавиатуру, чтобы заполнить все поля
  • пользователю не приходится вводить текст вслепую в поле, которое он не видит

По-прежнему наблюдается некоторая несогласованность между браузерами. JS-изменение размера, похоже, не работает в Chromium, но работает в Brave и Firefox. Однако даже в Chromium опыт улучшается благодаря тому, что модальные окна находятся в верхней части экрана, где нет клавиатуры.

Почему чистые CSS-подходы не сработали:

  • Я не думаю, что env(keyboard-inset-height) работает вне PWA на iOS
  • 100dvh теоретически должно работать, но, похоже, пока не поддерживается в моем мобильном браузере

Также я слышал от людей, что они не могли найти кнопку регистрации. Поэтому:

Отображать кнопку регистрации всегда, не скрывать её на мобильных устройствах:

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

Все эти проблемы мешали людям регистрироваться на форуме и создавать свои первые сообщения. Поэтому, хотя это может звучать просто, для меня, по крайней мере, это были исправления высочайшего приоритета.

5

Мне придётся протестировать оба варианта кода. У меня возникает эта проблема при редактировании шаблонов форм или использовании редактора тем для CSS/HTML. Я нашёл обходной путь для этого, добавив множество пустых строк. Эти исправления CSS выглядят гораздо лучше.

6

Думаю, команда уже работает над этим:

7

Хорошо, что это привлекает внимание… Но, как я уже упоминал, dvh в моих тестах не работает.

8

Привет, @bitmage! Не могли бы вы прислать скриншоты проблем, с которыми вы сталкиваетесь на Android? Или даже видео. Мне важно убедиться, что мы говорим об одном и том же. Спасибо!