How much difference is there between the same browser rendering on different platforms? For instance, will a given page render differently in Safari on a Mac versus Windows? Or Firefox on Linux and Windows? Are there any particular gotchas to be aware of?

Edit: Some great answers and I appreciate them all. I guess what I was wanting to know is if I'm, say, testing a site in Safari on Windows, will it look the same on a Mac as far as layout and rendering? Fonts are always a tricky issue but I tend to stick with the tried and true. Thanks again, all.

5 answers


Other differences are plugin-handling, and rendering of form widgets, since most browsers use the OS defaults for the latter.

Answered almost 10 years ago by Richard Grevers
Guffa 316

There are differences not only between platforms, but also between different versions of the same operating system, and different settings for the same version.

The fonts can of course differ. There is no guarantee that any specific font is available on all systems, and it's common that the names differ (for example Arial / Helvetica). To handle this the font-family attribute can have a preference list, with a generic fallback as the last resort:

font-family: Arial, Helvetica, sans-serif;

How the text is rendered differs also, font smoothing changes the measurement of characters, and kerning may differ slightly. The size of characters and the spacing around the text varies slightly between browsers and between different font renderings.

How form fields are rendered differs quite a lot depending on the platform, and also somewhat between browsers. Even if they look completely different, the size of the fields are fairly close though.

Answered almost 10 years ago by Guffa

There are definitely differences sometimes due to buggy platform-specific versions of browsers. For example, Firefox 2.x on Mac had a couple of really notorious rendering bugs that gave developers fits (like missing scrollbars within overflowed divs in certain situations, or the infamous invisible input focus issue). Specifically in terms of layout, assuming you're referring to box model type layout consistency, in my experience each rendering engine is pretty consistent across platforms -- it's handling the different engines that gets tricky. But again, due to potential bugs like those mentioned above, I don't think you can avoid testing across all supported platforms if you really want to ensure that everything is right.

Answered almost 10 years ago by bmoeskau
o.k.w 2355

Generally the difference is minimal, if any. The most significant one should be the fonts. Because fonts bundled with the OS/platform might be different. E.g. Windows might have Calibri, Helvetica in Mac OS X etc.

So font substitution will take place if the intended font for certain style is not found in the browser's system. Font rendering could affect the layout especially for non-fixed-width ones.

Answered almost 10 years ago by o.k.w
Marcel 57
  • Fonts are mostly rendered better on OSX,
  • Fonts depend on what is installed on the Computer, a Mac maybe has no Comic Sans installed.
  • Forms, that is maybe the biggest Problem, while a button in OSX looks tiny in Windows it can be enormous, also select and checkboxes may differ. The only one that looks pretty much the same everywhere is text inputs if you formatted it, but only then.
Answered almost 10 years ago by Marcel