Waarom ziet mijn site er anders uit in Safari?
Omdat Safari een andere motor gebruikt dan Chrome en Edge, en omdat het nieuwe technieken later ondersteunt.
Wat je in Chrome bouwt en test, kan in Safari net anders vallen. Meestal is dat cosmetisch, soms niet.
Op de iPhone telt het extra, want daar is Safari de motor achter élke browser.
De meest voorkomende verschillen
Lettertypen die iets zwaarder of lichter ogen. Afstanden die een paar pixels schelen. Schaduwen en afgeronde hoeken die net anders uitpakken.
Dat zijn geen fouten. Dat is hoe browsers werken. Meer daarover lees je bij css.
De verschillen die er wel toe doen
Een datumveld dat er anders uitziet. Of een video die niet automatisch start. Een vaste balk die bij het scrollen verspringt.
En formulieropmaak: Safari legt daar eigen stijlen overheen die je expliciet moet uitzetten.
Op de iPhone
Alle browsers op een iPhone gebruiken dezelfde motor als Safari. Chrome op een iPhone is dus geen Chrome.
Test daarom altijd op een echte iPhone als je publiek daar zit. Meer daarover lees je bij hoe je test zonder alle apparaten te bezitten.
Mijn vuistregels
- Test in Safari vóór oplevering, niet erna.
- Kijk vooral naar formulieren, video’s en vaste balken.
- Accepteer verschillen van een paar pixels.
- Leen een iPhone als je er geen hebt; een halfuur is genoeg.
Die tweede dekt vier van de vijf problemen die ik in de praktijk tegenkom.
Hoe je het oplost
Meestal met een extra regel opmaak die de standaardstijl van Safari uitschakelt, of met een terugvaloptie voor een techniek die nog niet ondersteund wordt.
Dat is werk van minuten zodra je weet waar het zit. Het vinden kost de tijd.
Wanneer je het laat
Als het puur om uiterlijk gaat en niemand het naast elkaar ziet. Perfectie in elke browser kost meer dan het oplevert.
Meer daarover lees je bij breakpoint.