# Le cover della tastiera mobile interfacciano e non consentono all'utente di scorrere
**URL:** https://meta.discourse.org/t/mobile-keyboard-covers-interface-and-does-not-allow-the-user-to-scroll/363505
**Category:** Support
**Tags:** development
**Created:** [25 Aprile 2025, 6:56pm UTC](https://meta.discourse.org/t/mobile-keyboard-covers-interface-and-does-not-allow-the-user-to-scroll/363505 "2025-04-25T18:56:52Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@bitmage](https://meta.discourse.org/u/bitmage)
#### Post date: [25 Aprile 2025, 6:56pm UTC](https://meta.discourse.org/t/mobile-keyboard-covers-interface-and-does-not-allow-the-user-to-scroll/363505/1 "2025-04-25T18:56:52Z")
> [@Android keyboard overlaps text when flagging with Something else](https://meta.discourse.org/t/android-keyboard-overlaps-text-when-flagging-with-something-else/249687):
>
> The screenshot says it all - you can’t see what you are typing. Latest Android Chrome, and the screenshot is taken here at Meta.
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.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [26 Aprile 2025, 12:20am UTC](https://meta.discourse.org/t/mobile-keyboard-covers-interface-and-does-not-allow-the-user-to-scroll/363505/3 "2025-04-26T00:20:41Z")
Hai provato la correzione CSS di Don?
> [@Don](#):
>
> Posso confermare 🙂 Questo succede in realtà su tutte le modali dove appare la tastiera. Ho fatto una rapida correzione in attesa di quella definitiva. 🙂
>
> Mobile / CSS
>
> ```plaintext
> .fixed-modal {
> html.keyboard-visible.mobile-device:not(.ios-device) & {
> height: calc(100% - env(keyboard-inset-height));
> .modal-inner-container {
> margin: auto;
> }
> }
> }
>
> ```
>
> Modifica: Ho appena notato che su iPad il tag html non contiene la classe `.ios-device` e questo codice si attiva anche sulla vista mobile di iPad. Quindi è probabile che sia una buona idea limitarlo ai dispositivi mobili. Ho modificato questo codice.
---
### Author:  [@bitmage](https://meta.discourse.org/u/bitmage)
#### Post date: [27 Aprile 2025, 3:02am UTC](https://meta.discourse.org/t/mobile-keyboard-covers-interface-and-does-not-allow-the-user-to-scroll/363505/4 "2025-04-27T03:02:53Z")
Questo è ciò che ha funzionato per me (nel mio tema):
custom.scss:
```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:
```js
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:
```css
.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à.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [27 Aprile 2025, 4:47pm UTC](https://meta.discourse.org/t/mobile-keyboard-covers-interface-and-does-not-allow-the-user-to-scroll/363505/5 "2025-04-27T16:47:03Z")
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.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [27 Aprile 2025, 4:50pm UTC](https://meta.discourse.org/t/mobile-keyboard-covers-interface-and-does-not-allow-the-user-to-scroll/363505/6 "2025-04-27T16:50:34Z")
> [@bitmage](#):
>
> Quindi, sebbene possa sembrare semplice, per me almeno queste sono state correzioni estremamente prioritarie.
Penso che il team ci stia già lavorando
>
>
> This PR includes three changes for the search panel in mobile view:
>
> 1. \`\\` height is set to dynamic \`dvh\` unit - this should fix the bottom page content overlay by the virtual keyboard. After this change, the user should be able to scroll to the very bottom of the page with the virtual keyboard shown.
> 2. The search input is blurred on the search results returned - this causes the virtual keyboard to hide, and provides more real estate for viewing search results.
> 3. The animation of closing the search panel is improved to give it a smoother look.
---
### Author:  [@bitmage](https://meta.discourse.org/u/bitmage)
#### Post date: [28 Aprile 2025, 1:02am UTC](https://meta.discourse.org/t/mobile-keyboard-covers-interface-and-does-not-allow-the-user-to-scroll/363505/7 "2025-04-28T01:02:56Z")
È un bene che stia ricevendo attenzione… Ma come ho detto, `dvh` non funziona nei miei test.
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [13 Maggio 2025, 8:14am UTC](https://meta.discourse.org/t/mobile-keyboard-covers-interface-and-does-not-allow-the-user-to-scroll/363505/8 "2025-05-13T08:14:46Z")
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!