Teclado móvel cobre a interface e não permite que o usuário role

Suporte
1

Isso ainda está bastante quebrado e impactando meus usuários no cadastro, login e ao criar/editar posts. Observei isso em telefones e tablets. Acho que pelo menos um dos tablets era um dispositivo iOS, mas observei isso principalmente no Android.

Meu fórum é geograficamente local, então muitas vezes consigo observar as pessoas interagindo com ele pessoalmente.

Estou aberto a uma correção CSS por enquanto, e seria bom que uma correção chegasse ao núcleo. Atualizarei aqui se encontrar uma solução.

3 curtidas
3

Você tentou a correção CSS de Don?

4

Este foi o que funcionou para mim (no meu tema):

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

Essas alterações resultam em uma experiência do usuário muito melhor:

  • o espaço limitado da tela é dedicado à tarefa em questão (campos de entrada) em vez de ser dividido entre o modal e o fundo
  • os campos não ficam ocultos pelo teclado, com o usuário incapaz de rolar
  • o usuário não precisa fechar, depois abrir, depois fechar, depois abrir o teclado para preencher todos os campos
  • o usuário não precisa digitar às cegas em um campo que não consegue ver

Ainda há alguma inconsistência entre os navegadores. O redimensionamento em JS não parece funcionar no Chromium, mas funciona no Brave e no Firefox. Mas a experiência no Chromium ainda é melhor com os modais no topo da tela, onde o teclado não está.

Por que as abordagens puramente CSS não funcionaram:

  • Acho que env(keyboard-inset-height) não funciona fora de PWAs no iOS
  • 100dvh em teoria funcionaria, mas ainda não parece ser suportado no meu navegador móvel

Também ouvi de pessoas que não conseguiam encontrar o botão de inscrição. Então:

Exiba o botão de inscrição o tempo todo, não o oculte no celular:

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

Todos esses problemas estavam impedindo as pessoas de se inscreverem no fórum e de fazerem sua primeira postagem. Portanto, embora possa parecer simples, para mim, pelo menos, essas foram correções de altíssima prioridade.

1 curtida
5

Terei que tentar ambos os conjuntos de código para testar. Como tenho esse problema ao editar modelos de formulário ou usar o editor de temas para CSS/html. Achei uma solução alternativa para esses adicionando um monte de linhas vazias. Essas correções de CSS parecem muito melhores.

6

Acho que a equipe já está trabalhando nisso

2 curtidas
7

É bom que esteja recebendo atenção… Mas como mencionei, dvh não funcionou nos meus testes.

1 curtida
8

Oi @bitmage, poderia postar capturas de tela dos problemas que você enfrenta no Android, por favor? Ou até vídeos. Quero ter certeza de que estamos falando da mesma coisa. Obrigado!