perché il sito è diverso su safari, chrome ed edge

web · 2026-09-05 · 3 min

perché un browser non è uno schermo, è un programma che interpreta il tuo codice con i suoi valori predefiniti. chrome, safari, firefox ed edge condividono quasi tutte le regole e litigano sui bordi: font, campi dei moduli, barre di scorrimento, video, e una manciata di proprietà css che safari implementa a modo suo.

quasi tutte le differenze che vedi non sono bug. sono il tuo css che incontra un default diverso, o un vecchio file in cache che doveva essere sostituito un'ora fa.

i sospetti di sempre

i font. uno stack di font di sistema sceglie il font del sistema: su windows ne ottieni uno, su macos un altro, su android un terzo. i ritorni a capo si spostano e la pagina si allunga. se il design dipende dai ritorni a capo esatti, ospita un font tuo invece di fidarti del sistema.

i campi dei moduli. input data, select, checkbox e caricamento file li disegna il browser, non il tuo css. su ios un campo data può sembrare completamente diverso dallo stesso campo su chrome.

le unità viewport. su mobile, 100vh include lo spazio dietro la barra degli indirizzi in alcuni browser e non in altri, ed è per questo che una sezione a tutto schermo salta quando la barra si nasconde. l'autoplay dei video è bloccato da safari se non è muto.

come vederlo senza indovinare

prova i quattro browser sul tuo computer, con un ricaricamento forzato: ctrl+shift+r, o command+shift+r su mac. metà delle segnalazioni "sul mio computer si vede male" sono un vecchio file css.

poi prova safari su ios, prestando un iphone o usando per un'ora un servizio come browserstack o lambdatest. apri gli strumenti di sviluppo in ogni browser e confronta gli stili calcolati sull'elemento che sembra sbagliato. la differenza è di solito una proprietà, non tutto il layout.

cosa sistemare e cosa accettare

supporta i browser che i tuoi visitatori usano davvero. sistema tutto ciò che blocca un compito: un modulo che non si invia, un menu che non si apre, un testo che si sovrappone a un pulsante, un video che non parte. accetta piccole differenze su ombre, angoli arrotondati e peso del font.

il sistema operativo è l'altra metà

il post si ferma al browser. molte differenze nascono più in basso, nel sistema operativo su cui il browser disegna.

la resa dei font. windows arrotonda le lettere alla griglia dei pixel, macos ha smesso da anni e disegna più morbido. lo stesso font, alla stessa dimensione, sembra più chiaro su un mac, e un peso che su windows si legge come normale su macos può sembrare sottile. è normale. diventa un bug quando un peso leggero su uno schermo grande sparisce, e la soluzione è un peso appena più alto, non un font diverso.

il colore. molti schermi mac usano uno spazio colore più ampio dell'srgb su cui sono scritti quasi tutti i colori css. un rosso corretto su un portatile windows può sembrare più acceso su un mac, e una foto esportata in display p3 appare piatta nei browser che ignorano il profilo. normale, finché la foto di un prodotto non somiglia più al prodotto.

le barre di scorrimento. macos le nasconde finché non scorri, windows le tiene sempre visibili e occupano larghezza. la stessa pagina su windows è più stretta di una decina di pixel, e una riga di card a tutta larghezza va a capo. questa vale la pena sistemarla, perché è un cambio di layout vero.

la scala e l'antialiasing. windows gira al 125 o 150 per cento su molti portatili, macos al doppio. i pixel frazionari trasformano un bordo da un pixel in due grigi, e la sfumatura subpixel di windows fa sembrare il testo piccolo più pesante di quella in scala di grigi di macos. è normale.

la regola: se il testo si legge e il layout tiene, è resa. se qualcosa si sovrappone, sparisce o non si clicca, è un bug da sistemare.

domande frequenti

quali browser devo supportare?

le versioni attuali di chrome, safari, firefox ed edge, più safari sulle ultime due versioni di ios. internet explorer non è nella lista.

perché il sito è diverso solo su iphone?

safari su ios usa un motore diverso da chrome su android. ha anche regole sue per l'autoplay e per come la barra degli indirizzi ridimensiona la pagina.

è colpa del mio codice o del browser?

quasi sempre del codice che si appoggia a un default. parti da un reset o da un design system che definisce esplicitamente spaziature, tipografia e stili dei moduli, e le differenze si riducono a quelle che non contano.

perché il mio sito sembra diverso su mac e windows?

perché i due sistemi disegnano testo, colore e barre di scorrimento con valori predefiniti diversi: sfumatura dei font, profili colore più ampi, barre sovrapposte o sempre visibili, e scala al 125 o 150 per cento su molti portatili windows. quasi sempre è resa normale, non un bug. va sistemato quando il testo non si legge più, o quando una riga di elementi va a capo perché la barra ha tolto larghezza.