Browser Comparisons

By Shamus
on Jun 25, 2007
Filed under:
Pictures

As a follow-up to this morning’s post about Safari on Windows, here is what I’m seeing in various browsers:


Here is my site as viewed through IE:

And here is the same thing in Firefox:

Now Opera:

And finally Safari:

I’m actually impressed at how similar everything looks in the first three, but I’m annoyed at how ugly it is in Safari. As others have pointed out, this seems to be a bug in the new Safari, and will most likely get sorted out as they move out of beta.

I can’t say I’m too impressed with Safari so far. The download page made a really big deal about speed, but the “framerate” in Windows Safari is just terrible. It’s supposedly the “fastest”, but in scrolling up and down my site the updates stutter in a way I haven’t seen since the mid-90’s. Maybe it isn’t fair to pick on beta software, but if they are going to make big claims about “best” performance then I expect it to at least come close to “adequate” when put to the test.

Otherwise it’s an interesting download. It IS strange to see the Mac window sitting on my XP desktop.

Enjoyed this post? Please share!


201434 comments. Hurry up and add yours before it becomes passé.

From the Archives:

  1. bloopy says:

    maybe my mac is configured way differently from your other mac readers but your safari screenshot is basically how it looks on my mac in both safari and firefox. . .

  2. Nazgul says:

    I’m in the same boat as bloopy: I use the latest Firefox on Mac OS X and the Windows/Safari screenshot is easily the best match to how the headings look to me. It doen’t bother me as a visitor (I barely notice it) but if it were might site then it would really bug me. :)

    I’ve been a Mac user since the beginning (although I use Windows and Unix as well) and I have to say that Safari on the Mac just doesn’t compare favorably to Firefox.

  3. Nazgul says:

    Oops… “might” = “my”

  4. bloopy says:

    oh, and i forgot to mention camino on my mac looks like your safari screenshot as well. . . if you care, i’m running:

    osx v10.4.10
    safari 2.0.4
    firefox 2.0.0.4
    camino 1.5

    except now that i look at it a bit closer, the weird coloring of the hyperlinks in your safari screenshot does *not* appear on any of my browsers. . . the main similarities are with the “DM of the Rings” text overlapping the top yellow bar, and with the “Posted by Shamus” line running into the bottom line. . .

    but then again, like i said, all your other mac readers don’t seem to have a problem so it’s probably just my system configuration or something. . .

  5. Keldon says:

    i find it odd that when spending all this time developing a web broswer the one theing they didnt test it on was web sites…

  6. Skip says:

    My guess is what you’re running into is the different font rendering in Safari, which was extensively written about all over the place last week. Basically, the mac (and safari) try to make fonts identical on the screen versus the printed page, and windows maps fonts to the pixel grid. So the font sizes you’ve chosen render slightly differently in IE versus safari.

    Note, this is just speculation, I haven’t bothered downloading safari at all.

  7. astro says:

    I’m a mac user as well (OSX 10.4.9) and I’ll echo bloopy’s observations from comment #4. I normally use Firefox (2.0.0.4), but I checked it in Safari (2.0.4) as well. Both show basically the same thing as your Win-Safari screenshot above. I’d never noticed it before, but I guess it is a bit wonky.

  8. Jeremiah says:

    “i find it odd that when spending all this time developing a web broswer the one theing they didnt test it on was web sites…”

    Test software for it’s intended use?! That’s crazy talk!

  9. trigear says:

    Shamus: Think it’s fun now? Wait ’til the Windows version of Safari locks up your entire computer. It happened to me. That’s just unforgivable in 2007.

  10. Mark says:

    Keldon, Apple didn’t develop the rendering engine from scratch (though they have made improvements), they just put their skin on it. Safari is based on the KHTML rendering engine, developed for the open source Konqueror browser/file manager (heavily integrated into KDE). KHTML is decent, but it’s not as well supported as IE and Firefox (gecko) and developers tend to ignore it. For the most part, it’s standards compliant, but it’s got it’s own little ideosyncracies like any other engine, and it’s really annoying. Opera has similar issues, but I love Opera because it’s got lots of great features I love (mouse gestures!). In any case, I’ve had all sorts of problems developing pages that work in IE, Firefox and Opera, but not in Safari. I wish they’d just have used gecko.

  11. Jericho says:

    Not to mention the part about the market share. Safari has a tiny tiny percentage of the market, so it really isn’t worth stressing about. The move to Windows will likely increase that a little, but honestly, I only worry about testing in Safari when a client specifically requests it, or as the last one on the chain.

    Also, like the others, your safari screenshot is spaced just exactly like what it looks like in Firefox on all my macs.

  12. Dix says:

    OS X 10.3.9/Safari 1.3.2 = same rendering as your Safari/Windows sample.
    OS X 10.3.9/Firefox 2.0.0.4 = same rendering… .
    So this isn’t new to Safari v. 3, just as a heads-up. Skip says (something like) Apple renders fonts this way, and Safari does also; this seems like it might be the case. Safari just persists in rendering them that way on Windows.

    Safari has one obvious thing over Firefox, for Mac users: it feels like a program written for Mac. The interface, design and performance are all MacMacMac. Firefox feels like a Windows port.

    That said, I use both Firefox and Safari for different purposes, and while I find it absolutely irritating if a site is designed in a way that neither browser can handle at all (and there are sites out there that pretty much only work in IE/Windows) – I don’t think this problem is yours to fix, Shamus, nor do I think you should worry about it. ;)

  13. Exatron says:

    It looks like it’s an issue with KHTML in Safari. My primary browser is Konqueror and it renders the site just like the IE, Firefox, and Opera images

  14. oldschoolGM says:

    Completely unrelated but: your page looks perfect using linux and firefox. Thank you for that.

  15. oldschoolGM says:

    Ummm, actually… now that you mention it, the text of the titles always do stretch above the banners. But still.. perfectly readable.

  16. Shrike says:

    Joel Spolsky explains why Safari looks “ugly” to most Windows users: http://joelonsoftware.com/items/2007/06/12.html

    It has to do with the approach Apple has to font rendering and anti-aliasing vs the way Microsoft does it.

  17. Marmot says:

    I admit I expected less similarity there… I’m an Opera user and gotta say, I think you should be satisfied with the said similarity, even if the font on first and last looks a bit ugly. But still no distortions!

  18. Stein says:

    Hmmm… Using ubuntu feisty and Firefox I get a picture more like the one you get from safari…
    My guess is also the font-rendering engine as linux uses yet another way of displaying fonts.

    Btw: Try the http://validator.w3.org/ to check out how pages conform to the standards… Quite interesting if you like that kind of nitpicking.

  19. Mark says:

    Font support across platforms also causes some issues with layout, so it doesn’t always have something to do with the rendering engine (this might explain why some people don’t have any issue, while some with similar set ups do). For instance, verdana/arial displays kinda funny on my Ubuntu Feisty box. I think someone also mentioned font rendering, which can also be an issue (along with anti-aliasing). This becomes particularly frustrating when it comes to CSS layouts:P

  20. DigitalMonk says:

    The was one thing that leaped out at me from the comments: One of the readers noted that Firefox on a Mac rendered the same way that Safari did. So the difference would seem to be whether you’re on Windows or on a Mac. I suspect that Safari for Windows drags along a huge amount of rendering code and ignores the Windows GDI, so that what you end up with is a little embedded Macintosh rendering your pages (Apple doesn’t do portability any better than Microsoft does — both of them just keep doing what they do and suck up as many pieces of their expected operating system as needed).

    So, what’s different between Macs and Windows relating to fonts and font sizes. Well, the first thing that leaps to mind is that Macs used to be based on an assumption of 72dpi — I’m not sure what the current estimate is. Windows, on the other hand, assumes either 96dpi (small fonts) or 120dpi (large fonts). Now, if Safari for Windows is carrying around a Macintosh dot pitch assumption instead of calling GetSystemMetrics and working it out properly, you’re basically just hosed for sizing.

    (Note: I will try to be consistent and use the phrase “dot pitch” instead of “resolution”, because I am talking about the physical number of pixels per inch (96dpi), not the number of pixels on your screen (1600×1200). If I let “resolution” slip through, just read it as “dot pitch”…)

    On a side note, it might be interesting to switch small/large fonts and re-run your tests through all four browsers. Oh, and if you’d like to watch something approaching 99.999% of all Windows software screw up its layout, try actually using the dynamic ruler thing to tell Windows what your ACTUAL screen dot pitch is. Most software just assumes small fonts. Of the small portion that is aware of the issue and attempts to do anything about it, most of that software just checks to see if you’re in small fonts or large fonts and switches between two layouts. VERY few pieces of software actually take the effort to layout properly for arbitrary dot pitch.

    Ok, end of rant…

  21. DigitalMonk says:

    (Crud, editing glitch right at the front: “the was one” should just be “the one”. And sorry for the length…)

  22. roxysteve says:

    [shamus] The answer is simple: Get all your disgruntled, disenfanchised mac users to club together and buy you a mac to test your markup on.

    It’s either that or turn the heading into a picture like so many sites who care about the issue but don’t want the hassle of testing this year’s flavour of CSS standard against the browser-of-the-month do. That way you avoid the issue of the “don’t have the right font installed so I’ll guess” problem either.

    Steve.

  23. MPR says:

    The fonts are visually the same size between the samples, and hopefully are designated in px, so I would try setting an explicit line height.
    In “.posttitle” add “line-height: 1.2em;”
    In “.postinfo” add “line-height: 1.5em;”

    This resolved the difference between Firefox/Mac and Firefox/Windows for me. I did not test other browsers, since I did this through the excellent Web Developer extension, and I’m too lazy to copy all the html and resolve the image links and all that crap. But it’s worth trying on the server end.

  24. oldschoolGM says:

    “18 Stein Says:
    June 26th, 2007 at 5:39 am

    Hmmm… Using ubuntu feisty and Firefox I get a picture more like the one you get from safari…
    My guess is also the font-rendering engine as linux uses yet another way of displaying fonts.”

    Exactly what I am using. Heres a screenshot. Not enough of a difference to be worried about IMO.

    http://i199.photobucket.com/albums/aa226/greeenman/Screenshot.png

  25. ShadoStahker says:

    So, to compile:

    Fine
    ————
    IE on Windows
    Firefox on Windows
    Opera on Windows
    Konqueror on Linux
    Firefox on Linux

    Wonky
    ————
    Safari on Windows
    Anything on Mac

    Kind of Wonky
    ————
    Firefox on Ubuntu Feisty

  26. Dave says:

    OMG.. your anal tendency is showing.

  27. supermank17 says:

    Just to chip in, I checked on my mac, and all three of my browsers have the same issue (firefox, safari, camino); definitely appears to be a mac thing.

  28. Ian says:

    The fonts on that Ubuntu screenshot are huge. The font settings in Gnome are probably throwing the display of the page off.

    I have my Gentoo/KDE installation set to 96 dpi (forced in the KDE Control Center at the desktop environment level — Firefox is set to its default settings as far as that goes) and Twenty Sided looks perfectly fine with it.

    Needless to say, it looks correct on Firefox/Windows.

  29. Ian says:

    Also, wow, JPEG compression simply slaughters the sub-pixel hinting in the IE and Safari screenshots. O.o

  30. Rustybadger says:

    @roxysteve: Thanks for the suggestion about buying Shamus a Mac. I, for one, am totally in favour of the idea – any other Macheads out there in DMOTR-land want to jump on this? The new Macs come with Comic Life too!

  31. MPR says:

    Update: I have confirmed that the “line-height” adjustment above does in fact preserve the current vertical text spacing on Windows, and brings the Mac version in line.
    The default line height is different between the OS’s, so setting it explicitly makes the display consistent.
    In general, when laying out elements over a background, you have to be very particular about pixel offsets, with tables or CSS positioning or such. Otherwise we are at the fickle whimsical mercy of the OS gods. Moreso than usual that is.
    /me shakes fist at gods.

  32. Marty says:

    CSS is a tricky beast because different OS’s and browsers use different defaults for varies items like line height, padding, image margins, etc…

    Unlike what many are saying here, Safari isn’t “wrong”, or “wonky”, it’s just different, just as Firefox and IE often behave differently on Windows with the same CSS.

    This is a problem I and my peers (who work at a web company) struggle with every day as we develop sites for multiple platforms and browers.

    Just because something is “different” doesn’t imply it’s “wrong”… just at the 72 vs 96 dpi issue doesn’t make one OS wrong or different. They were just designed with slightly differing goals (ie – print vs screen rendering).

    That said, the *least* compliant browser to the W3C standards is IE 6, by far. IE 7 is better than IE 6 and Firefox is probably the best in terms of adhering to standards, but no one browser is perfect.

    When we develop CSS that “looks right” in Firefox, it usually looks right in Safari and generally IE 7. IE 6 often requires its own CSS hacks to get just right.

  33. Lo'oris says:

    I’ve got OSX 10.3 and it looks bad on all four browsers (Firefox, Camino, Safari, Opera).

    Good news: I didn’t even notice until now.

  34. Lo'oris says:

    @trigear: no. It’s unforgivable that people complains about beta software. “Use at your own risk (and stfu)”.

Leave a Reply

Comments are moderated and may not be posted immediately. Required fields are marked *

*
*

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun.

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>