la barra dei menu di Safari IOS è in conflitto con i pulsanti nella parte inferiore del 10% dello schermo

14

Sto costruendo un portale web che deve essere funzionale e carino su più piattaforme. Una delle piattaforme è IOS Safari, ed è qui che ho riscontrato un problema. Nel mio codice allineo due pulsanti fluttuanti nella parte inferiore di un div con una larghezza e un'altezza del 100%. Tutto funziona bene e i miei pulsanti vengono visualizzati esattamente come dovrebbero essere in fondo alla pagina. Tuttavia, quando faccio clic sui pulsanti, la visualizzazione compatta da Safari mobile passa alla visualizzazione completa e i miei pulsanti sono nascosti dietro la barra di navigazione in basso!

È normale che Safari Mobile mostri il menu espanso quando l'utente tocca il 10% inferiore dello schermo? Come posso evitarlo?

In questa gif puoi vedere il problema sul simulatore IOS: esempio
Come puoi vedere, il problema si verifica solo quando un pulsante si trova nel 10% inferiore della vista. Questo è solo un pulsante normale, Il mio codice è stato controllato tre volte da diversi sviluppatori e non ha errori.

— dennismuijs
fonte

Se elenchi lo snippet di codice, contrassegna questo e possiamo migrare allo stack overflow ...

— bmike

Ho creato un bug per Safari, per favore commenta qui: bugs.webkit.org/show_bug.cgi?id=194235

— sheerun

5

Questo è un comportamento normale in Mobile Safari, toccando nella parte inferiore verranno visualizzate le varie opzioni del browser e scorrerà la pagina Web di conseguenza. La funzionalità della pagina Web rimane invariata, quindi l'utente può comunque toccare il pulsante dopo averlo fatto scorrere per accedere a qualunque funzionalità abbia.

— nohillside
fonte

4

Grazie Patrix, so che questo è normale, ma c'è un modo per sovrascrivere questo comportamento tramite html, css o js? Ho già pubblicato questa domanda su overflow dello stack, ma dal momento che è qualcosa correlato a Apple forse chiedere-diverso saprà un modo

— dennismuijs

1

StackOverflow (o anche un sito SE in cui gli sviluppatori Web si ritrovano) è meglio per questo tipo di cose rispetto a AD (che si concentra sui problemi degli utenti finali). Poiché l'accesso ai controlli del browser è in qualche modo essenziale per l'utente, dubito che ci sia un modo per evitare il comportamento.

— Nohillside

link allo stack overflow q & a per questo?

— Ben Roberts,

7

Penso di aver trovato una risposta. Impostare il contenuto in modo che abbia i seguenti stili:

height: 100% (consente al contenuto di riempire la finestra e andare oltre il fondo)
overflow-y: scroll(consente di scorrere sotto il riquadro di visualizzazione; il valore predefinito è visible)
-webkit-overflow-scrolling: touch (per attenuare qualsiasi comportamento di scorrimento)

sembra forzare la visualizzazione del menu iOS in Safari. In questo modo, i clic sui pulsanti funzioneranno effettivamente invece di aprire il menu Safari. Spero che questo ti aiuti!

— jennz0r
fonte

Certo, questo funziona, ma non tutti i siti possono tollerare l'impostazione overflow-y: scrollnella loro area di contenuto principale. Questo hack ha effetti collaterali che influenzeranno tutti i suoi elementi figli. Per dirla in modo più corretto, queste proprietà dei CSS influenzano direttamente tutti gli elementi dei bambini e forzare la visualizzazione del menu Safari in realtà è l'effetto collaterale.

— zevdg,

Grazie. Non ho ancora provato a toccare verso la parte inferiore dello schermo, ma almeno il 10% del mio design non è coperto dall'odiosa barra dei menu di Safari. Per aggiungere a questo, è necessario fornire anche ogni elemento contenente height: 100%. Per un'azienda che guadagna molto dai propri dispositivi mobili, la sua esperienza sul Web mobile è orribile.

— corysimmons,