Allinea la barra di navigazione fra iOS e Android

L'altezza della barra era dedotta dai padding delle voci e poi ricopiata a
occhio altrove: `pb-24` nel contenitore delle pagine, `pb-28` nella
celebrazione badge. Su iPhone i conti tornavano per 2 px — barra ~60 px più
34 px di safe area contro 96 px riservati — quindi bastava un inset diverso
(orizzontale, o un modello con home indicator più alta) perché l'ultimo
elemento della pagina finisse sotto la barra. Solo su iOS: su Android
avanzavano 36 px.

Ora la geometria sta in due token, `--altezza-nav` e `--pad-sicura-fondo`, e
le utility `spazio-nav` e `pad-sicura-fondo` la leggono da lì. La striscia
toccabile ha altezza fissa, così misura uguale sui due sistemi e sotto varia
solo l'inset: `max(env(safe-area-inset-bottom), 0.5rem)` dà ad Android un
respiro minimo dove iOS mette la home indicator. Identiche al pixel non
possono essere — quell'inset esiste per un motivo fisico che Android non ha —
ma la differenza è ora un margine in più, non un allineamento diverso.

`100vh` diventa `100dvh` ovunque: su iOS Safari `vh` misura il viewport con la
toolbar collassata, cioè più alto di quello visibile, e le schermate a tutta
altezza risultavano più lunghe dello schermo. `dvh` segue la toolbar.

Aggiunto il ripiego per Chrome su Android, che disattiva `backdrop-filter`
senza accelerazione hardware: senza, su quei device la barra restava
semitrasparente e il contenuto si leggeva attraverso.

Resta fuori portata una differenza sola: in Safari non installata la toolbar
di sistema sta in basso e collassa allo scroll, quindi la barra si muove con
essa. Su Chrome la toolbar è in alto. Si risolve installando la PWA.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

This commit is contained in:

davide

2026-09-05 14:50:32 +02:00

co-authored by

Claude Opus 5

parent 5a534547ae

commit 78ae3fbbd7

6 changed files with 113 additions and 62 deletions

									
										src/routes/benvenuto.tsx
									
		+1
		-1
	
												View File
												
				@@ -92,7 +92,7 @@ function Benvenuto() {

				  const inAttesaCollegamento = !!utenteId && !mioSlot && !erroreCollegamento;

				  return (

				    <div className="flex min-h-screen flex-col items-center justify-center px-6 py-12">

				    <div className="flex min-h-dvh flex-col items-center justify-center px-6 py-12">

				      <TeamLogo className="h-20 w-20" />

				      <h1 className="mt-6 text-center font-display text-4xl uppercase leading-none">

				        Benvenuto in CrAPP