Google Chrome vs Safari 3.1

    Newer Older

    One of the first things I tried out after installing the brand new Google Chrome was my own upcoming site's holding page — found at farukat.es/ — as it has some CSS transitions and miscellaneous CSS3 properties in it. With Google Chrome using Webkit as the rendering engine (to a point), I was curious to see how it would perform on up-and-coming CSS awesomeness.

    Sadly, it seems the Webkit build that Google Chrome uses has been mutilated to an extent: the text-shadow property has been stripped out (Why?!) and, worse, the CSS border-radius rendering is not anti-aliased (Why?!?!).

    If anyone knows what the reason for these changes is, please leave a comment.

    Addendum:
    Here is the UA String (navigator.userAgent result) for Google Chrome:

    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

    Update
    So it turns out that because Google Chrome uses Skia, a different graphics engine than employed by Webkit/Safari, various rendering features are not yet or not yet fully implemented. Shadows, anti-aliasing and certain opacity and alpha-transparency combinations are the most notable features currently missing. Google plans to add these but has not given time estimates.

    robotspacer, , Michel Balzer, and 3 other people added this photo to their favorites.

    View 12 more comments

    1. daveadams 69 months ago | reply

      Why?!?!

      Maybe because it's a beta? Did they even start from the same code that's currently in Safari? That seems unlikely.

    2. Brian Campbell 69 months ago | reply

      Remember that in Google Chrome, they had to do their own Windows port, and implement all of their own drawing layer, because Safari on Windows (and thus Apple's Windows WebKit) uses Apple's proprietary libraries for things like the actual drawing, network access, and stuff like that.

      So it's not like they've broken anything from WebKit; they just haven't finished implementing everything in their drawing layer. Remember, this is the first day of their first public beta release; there will be a few rough edges.

    3. kurafire 69 months ago | reply

      Brian: thanks for those clarifications. The "still working on the drawing layer" part really explains the core of it all. Good to know :-)

    4. patricktaylor 69 months ago | reply

      there will be a few rough edges

      No pun intended, I'm sure.

    5. Luke Hardiman 69 months ago | reply

      Lets hope Google can apply better aesthetics to Chrome than they have to Gmail and so many of their other products (with Jeff Veen's work on Analytics being the only partial exception I can think of).

    6. wezm 69 months ago | reply

      From the Chromium Developer Documentation:

      Graphics uses the Skia graphics library developed for Android. This is a cross-platform graphics library and handles all images and graphics primitives except for text.

      So they aren't using Cairo or CoreGraphics like the two main Windows WebKit ports are using at the moment. I'm sure it will improve over time.

    7. damnItHarsh 69 months ago | reply

      kurafire, I tried "http://farukat.es/" on IE (7.0.5730.11), Firefox (2.0.0.16), Opera (9.52 build 10108) and Google Chrome. For this under development website, my personal opinion is that it rendered most gracefully under the Chrome. Opera and IE gave it ugly rectangular boxes & Mozilla gave it the oval edges that you intended (without shadow on text and jagged/rough edges). I guess you gave it some animation (delayed representation on text) , and only Chrome did it right!
      I'm not the right person to comment on how good your code is, but if I had to spend my million dollars on which browser rendered it best, I'll probably give it to Chrome (though I would continue to use the wonderful Firefox on my computer ;) ).

    8. Jonny Haynes 69 months ago | reply

      It breaks alot of sites compared to Safari and the others - I wonder which Webkit build they have used!

    9. iPjtr 69 months ago | reply

      They probably dropped the text-shadow because it's incompatible with cleartype.
      Have you seen a text-shadow in IE6 with cleartype enabled? It renders the text almost illegible. Microsoft 'solves' this in IE7 by disabling cleartype on every text that has a shadow on it. Safari for Windows 'solves' this by not using cleartype at all.
      Now Google came up with a third option: no text-shadow at all. Let's hope they keep it in the Mac version.

    10. John Muir [deleted] 69 months ago | reply

      @damnItHarsh

      FF2? Are you on Win 98??

    11. swein515 69 months ago | reply

      Chrome will be stillborn on the Mac if it doesn't have full CSS3 support and Safari-grade rendering quality. Google surely knows this...

    12. kurafire 69 months ago | reply

      @swin515:
      "full CSS3 support"? Hardly something that the browsing audience cares about at this stage. Developers would love more browsers with more CSS3 support (but "full" is impossible as the spec isn't even anywhere close to being finished) but Google Chrome is not tailored to developers at all; it's tailored to people just using their browser.
      Safari-grade rendering is more likely on the Mac version because GChrome could plug into OS X's rendering engine instead of Windows's outdated and incapable one.

      @damnItHarsh:
      Chrome uses Webkit, which is the same browser engine that Safari uses. My site's holding page is tailored to the capabilities found —up to Chrome's release— in Safari 3.1.
      May I suggest that rather than using Firefox 2, you upgrade to FF3 (it's much faster) and that you also try out Safari on Windows? It's quite a bit more capable than Chrome and renders things a lot better.

    13. Guillermo Esteves 69 months ago | reply

      From Chromium-dev:

      "Because we use a different graphics library than Safari, some CSS
      properties required extra work to implement. Text-shadow is one of a
      few of these we weren't able to implement in time for beta."

    14. [taaadAAAH!] 69 months ago | reply

      very good post to show the differences of rendering between Chrome and Safari. i love Safari because of its unique way of rendering, but i hate it because of eating up my XP resources.
      for me, a combination of FF3's speed and Safari's rendering would be the perfect web-browser. i hope a future version of Chrome will handle these :)

    15. healingkid 69 months ago | reply

      Thanks for the comparison. Chrome's next iterations should get a lot of attention as well.

    16. OwlBoy 69 months ago | reply

      Maybe this is part of why it is so fast? :)

    17. dinolatoga.com 69 months ago | reply

      The browser is still in beta so bugs like this are inevitable. You can read more about the png opacity bug of Google Chrome here -> dinolatoga.com/2008/09/04/google-chrome-beta-png-opacity-...

    18. mbadsey 56 months ago | reply

      i have to agree, currently building a website and as good as Chrome is the CSS Rendering needs to be smoothed out but with frequent updates im shore it will improve

    keyboard shortcuts: previous photo next photo L view in light box F favorite < scroll film strip left > scroll film strip right ? show all shortcuts