La cubierta del teclado móvil cubre la interfaz y no permite que el usuario desplácese

Soporte
1

Esto todavía está bastante roto y afecta a mis usuarios al registrarse, iniciar sesión y al crear/editar publicaciones. He observado esto tanto en teléfonos como en tabletas. Creo que al menos una de las tabletas era un dispositivo iOS, pero lo observo principalmente en Android.

Mi foro es geográficamente local, por lo que a menudo puedo observar a las personas interactuando con él en persona.

Estoy abierto a una solución CSS por ahora, y probablemente sería bueno que una solución llegara al núcleo. Actualizaré aquí si encuentro una solución.

3 Me gusta
3

¿Probaste la solución CSS de Don?

4

Esto es lo que me funcionó (en mi 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`;
      }
    });
  }

Estos cambios dan como resultado una UX mucho mejor:

  • el espacio limitado de la pantalla se dedica a la tarea en cuestión (campos de entrada) en lugar de dividirse entre el modal y el fondo
  • los campos no quedan ocultos por el teclado, y el usuario no puede desplazarse
  • el usuario no tiene que cerrar, luego abrir, luego cerrar, luego abrir el teclado para rellenar todos los campos
  • el usuario no tiene que escribir a ciegas en un campo que no puede ver

Todavía hay cierta inconsistencia entre navegadores. El redimensionamiento de JS no parece funcionar en Chromium, pero sí en Brave y Firefox. Pero la experiencia en Chromium sigue siendo mejor con los modales en la parte superior de la pantalla, donde no está el teclado.

Por qué los enfoques de CSS puro no funcionaron:

  • No creo que env(keyboard-inset-height) funcione fuera de las PWA en iOS
  • 100dvh en teoría funcionaría, pero parece que aún no es compatible en mi navegador móvil

También escuché de personas que no podían encontrar el botón de registro. Entonces:

Mostrar el botón de registro todo el tiempo, no ocultarlo en dispositivos móviles:

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

Todos estos problemas impedían que las personas se registraran en el foro y que hicieran su primera publicación. Por lo tanto, aunque pueda parecer simple, al menos para mí estos fueron arreglos de altísima prioridad.

1 me gusta
5

Tendré que probar ambos conjuntos de código para probar. Ya que tengo este problema al editar plantillas de formularios o al usar el editor de temas para CSS/html. Se me ocurrió una solución para esos agregando un montón de líneas vacías. Estas correcciones de CSS se ven mucho mejor.

6

Creo que el equipo ya está trabajando en eso

2 Me gusta
7

Es bueno que esté recibiendo atención… Pero como mencioné, dvh no funciona en mis pruebas.

1 me gusta
8

Hola @bitmage, ¿podrías publicar capturas de pantalla de los problemas que enfrentas en Android por favor? O incluso videos. Quiero estar seguro de que estamos hablando de lo mismo. ¡Gracias!