In che modo è possibile forzare la barra di navigazione inferiore Safari per mostrare a livello di programmazione?

Question

Ho un pulsante fisso per un invito all'azione (call to action) nella parte inferiore della mia pagina web. Scorrendo la pagina verso il basso sulla versione più recente di iOS, Safari mobile nasconde la barra di navigazione in basso (con pulsanti indietro, avanti, condivisione, segnalibro e nuova scheda). Se fai clic sul pulsante CTA, invece di eseguire quell'azione, Safari mobile mostra la barra di navigazione in basso.

Come soluzione, stavo cercando di mostrare sempre la barra di navigazione in basso. C'è un modo per farlo? Entrambi, Jack Threads, se visualizzati sul dispositivo mobile, e il sito mobile di Thread Flip sono in grado di disattivarlo durante la visualizzazione di un singolo elemento.

Impossibile eseguire il reverse engineering fino ad ora. Qualcuno sa come si realizza lo spettacolo di forza?

relativi a: Buttons aligned to bottom of page conflict with mobile Safari's menu bar e Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped

Answer 1

Sto avendo lo stesso problema. Stiamo lavorando per implementare una navigazione di fondo sul nostro sito e Safari ci sta dando problemi perché toccando la parte inferiore dello schermo si apre il navigatore inferiore di Safari, costringendo gli utenti a fare clic due volte. La soluzione migliore che abbiamo trovato è stata quella di aggiungere uno spazio di 44px sotto la navigazione che sembra davvero pessimo. Sarebbe bello se potessi forzare la navigazione di Safari a rimanere aperta in modo che potesse riempire quello spazio invece di un blocco vuoto essenzialmente inutile.

Answer 2

Penso di aver trovato una risposta. Impostazione dei contenuti per avere i seguenti stili:

• height: 100% (permette di contenuti per riempire la finestra e andare al di là del basso)
• overflow-y: scroll (permette di scorrere al di sotto della finestra; il valore predefinito è visibile)
• -webkit-overflow-scrolling: touch (per appianare qualsiasi comportamento di scorrimento)

sembra forzare il menu di iOS di Safari per apparire sempre. In questo modo, i clic sui pulsanti funzioneranno invece di aprire il menu di Safari.

Sfortunatamente, devi associare questo CSS con il rilevamento del browser JavaScript perché compromette lo scorrimento su iOS Chrome (anche webkit). Non è possibile scegliere come target tutte le versioni di Safari iOS solo utilizzando solo CSS.