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/components/crapp/CelebrazioneBadge.tsx
									
		+1
		-1
	
												View File
												
				@@ -32,7 +32,7 @@ export function CelebrazioneBadge() {

				  if (!notifica) return null;

				  return (

				    <div className="anim-reveal fixed inset-0 z-50 grid place-items-end bg-foreground/40 p-4 pb-28 backdrop-blur-sm">

				    <div className="anim-reveal spazio-nav fixed inset-0 z-50 grid place-items-end bg-foreground/40 px-4 pt-4 backdrop-blur-sm">

				      <div

				        className={cn(

				          "anim-pop w-full max-w-md rounded-3xl bg-card p-5 shadow-pop ring-2",