why your site looks different in safari, chrome and edge

web · 2026-09-05 · 3 min

because a browser is not a screen, it is a program that interprets your code with its own defaults. chrome, safari, firefox and edge share most of the rules and disagree on the edges: fonts, form controls, scrollbars, video, and a handful of css properties that safari implements its own way.

most of the differences you see are not bugs. they are your css meeting a different default, or an old cached file that should have been replaced an hour ago.

the usual suspects

fonts. a system font stack picks the system font: on windows you get one thing, on macos another, on android a third. the line breaks move and the page gets taller. if the design depends on exact line breaks, self-host one font instead of trusting the system.

form fields. date inputs, selects, checkboxes and file uploads are drawn by the browser, not by your css. on ios a date field can look completely different from the same field in chrome.

viewport units. on mobile, 100vh includes the space behind the address bar in some browsers and not in others, which is why a full-screen section jumps when the bar hides. video autoplay is blocked by safari unless muted.

how to see it without guessing

test the four browsers on your own machine first, with a hard refresh: ctrl+shift+r, or command+shift+r on a mac. half of the "it looks broken on my computer" reports are an old css file.

then test safari on ios, either by borrowing an iphone or with a service like browserstack or lambdatest for an hour. open devtools in each browser and compare the computed styles on the element that looks wrong. the difference is usually one property, not the whole layout.

what to fix and what to accept

support the browsers your visitors actually use. fix anything that stops a task: a form that cannot be submitted, a menu that does not open, text that overlaps a button, a video that cannot be played. accept small differences in shadows, rounded corners and font weight.

the operating system is the other half

the browser post stops at the browser. many of the differences people report start lower down, in the operating system the browser is drawing on.

font rendering. windows snaps letters to the pixel grid; macos stopped doing it years ago and draws text slightly softer. the same font at the same size looks lighter on a mac, and a weight that reads as regular on windows can read as thin on macos. that is normal. it becomes a bug when a light weight on a large screen disappears, and the fix is a slightly heavier weight, not a different typeface.

colour. many mac displays use a wider colour space than the srgb that almost every css colour assumes. a red that is correct on a windows laptop can look more saturated on a mac, and a photo exported in display p3 looks flat in browsers that ignore the profile. normal, until a photo of a product no longer matches the product.

scrollbars. macos hides them until you scroll, windows keeps them visible and they take width. the same page is a dozen or so pixels narrower on windows, and a full-width row of cards can wrap. this one is worth fixing with a stable gutter, because it is a real layout change.

scaling and antialiasing. windows runs at 125 or 150 percent on most laptops, macos at double. fractional pixels turn a one-pixel border into two grey ones, and subpixel smoothing on windows makes small text look heavier than the greyscale smoothing on macos. also normal.

the rule: if the text is still readable and the layout still holds, it is rendering. if something overlaps, disappears or cannot be clicked, it is a bug you can fix.

faq

which browsers should i support?

the current versions of chrome, safari, firefox and edge, plus safari on the last two ios versions. internet explorer is not on it.

why does my site look different only on iphone?

safari on ios uses a different engine from chrome on android. it also has its own rules for autoplay and for how the address bar resizes the page.

is it my code or the browser?

almost always the code relying on a default. start from a reset or from a design system that defines spacing, type and form styles explicitly, and the differences shrink to the ones that do not matter.

why does my website look different on mac and windows?

because the two systems draw text, colour and scrollbars with different defaults: font smoothing, wide-gamut colour profiles, overlay or visible scrollbars, and 125 or 150 percent scaling on many windows laptops. most of it is normal rendering, not a bug. fix it when text becomes unreadable, or when a row of elements wraps because the scrollbar took the width.