Le cover della tastiera mobile interfacciano e non consentono all'utente di scorrere

Supporto
1

Questo è ancora piuttosto rotto e influisce sui miei utenti durante la registrazione, l’accesso e la creazione/modifica di post. Ho osservato questo accadere sia su telefoni che su tablet. Penso che almeno uno dei tablet fosse un dispositivo iOS, ma lo osservo principalmente su Android.

Il mio forum è geograficamente locale, quindi spesso ho l’opportunità di osservare le persone interagire con esso di persona.

Sono aperto a una correzione CSS per ora, e sarebbe probabilmente utile che una correzione entrasse nel core. Aggiornerò qui se troverò una soluzione.

3 Mi Piace
3

Hai provato la correzione CSS di Don?

4

Questo è ciò che ha funzionato per me (nel mio 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`;
      }
    });
  }

Queste modifiche si traducono in un’esperienza utente molto migliore:

  • lo spazio limitato dello schermo è dedicato all’attività in corso (campi di immissione) anziché essere diviso tra modale e sfondo
  • i campi non vengono nascosti dalla tastiera, impedendo all’utente di scorrere
  • l’utente non deve chiudere, quindi aprire, quindi chiudere, quindi aprire la tastiera per compilare tutti i campi
  • l’utente non deve digitare alla cieca in un campo che non può vedere

C’è ancora qualche incoerenza tra i browser. Il ridimensionamento JS non sembra funzionare in Chromium, ma funziona in Brave e Firefox. Ma l’esperienza Chromium è comunque migliore con le modali in cima allo schermo, dove non c’è la tastiera.

Perché gli approcci CSS puri non hanno funzionato:

  • Non credo che env(keyboard-inset-height) funzioni al di fuori delle PWA su iOS
  • 100dvh in teoria funzionerebbe ma non sembra essere ancora supportato nel mio browser mobile

Ho anche sentito da persone che non riuscivano a trovare il pulsante di registrazione. Quindi:

Mostra sempre il pulsante di registrazione, non nasconderlo su mobile:

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

Tutti questi problemi impedivano alle persone di registrarsi al forum e di effettuare il loro primo post. Quindi, anche se può sembrare semplice, almeno per me queste sono state correzioni ad altissima priorità.

1 Mi Piace
5

Dovrò provare entrambi i set di codice per testare. Poiché ho questo problema quando modifico i modelli di modulo o utilizzo l’editor di temi per CSS/html. Ho trovato una soluzione per questi aggiungendo un sacco di righe vuote. Queste correzioni CSS sembrano molto meglio.

6

Penso che il team ci stia già lavorando

2 Mi Piace
7

È un bene che stia ricevendo attenzione… Ma come ho detto, dvh non funziona nei miei test.

1 Mi Piace
8

Ciao @bitmage, potresti condividere schermate degli problemi che incontri su Android per favore? O anche dei video. Voglio essere sicuro che parliamo della stessa cosa. Grazie!