Google Chrome vs Safari 3.1

trovster    says:

I checked my site (heh) and noticed the PNGs not rendering well at all...
Posted 14 months ago. ( permalink )

Bryan Veloso    says:

Same. It seems that they've replaced text-shadow with text-shitify. D:
Posted 14 months ago. ( permalink )

kurafire    says:

Trovster: what do you mean, PNGs not rendering well? I haven't seen any broken PNG rendering in Chrome so far. Link to examples?
Posted 14 months ago. ( permalink )

trovster    says:

@kurafire www.trovster.com -- the navigation, the h2.introduction and the treatment on the h1 image replacement...
Posted 14 months ago. ( permalink )

Mark Priestap says:

Dadgum.
Posted 14 months ago. ( permalink )

jmagnani says:

Yeah, it seems that 24-bit PNG's that have CSS opacity set on them get their alpha values rounded to 1-bit. Gives your PNG's a pixely white halo.
Posted 14 months ago. ( permalink )

nevali    says:

What're the respective versions of WebKit? (does Chrome even expose this anywhere—UA string, perhaps?)

It looks less mutilated and more just plain old based on the information here.
Posted 14 months ago. ( permalink )

scott_t_frazer says:

Trovster: your site loads fairly poorly on my OS X Safari 3.1.2. No header image (that seems fine on Firefox) and your favicon is a black box.
Posted 14 months ago. ( permalink )

trovster    says:

@scott_t_frazer Looks perfect to me in Safari 3.1.2 OSX, font rendering is awesome, too. Oh yeh, and my favicon is 'correct'.
Posted 14 months ago. ( permalink )

xipietotec says:

it appears that the bug is with the interaction between png-alpha channels and the CSS "Set transparency" attribute.
Posted 14 months ago. ( permalink )

Guillermo Esteves    says:

The rounded corners look even worse when you add -webkit-box-shadow:


Posted 14 months ago. ( permalink )

Brendan Falkowski    says:

Try the "foliage-o-meter" on komodomedia.com to see the PNG transparency failwhaleage in action.
Posted 14 months ago. ( permalink )

daveadams    says:

Why?!?!

Maybe because it's a beta? Did they even start from the same code that's currently in Safari? That seems unlikely.
Posted 14 months ago. ( permalink )

Brian Campbell says:

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.
Posted 14 months ago. ( permalink )

kurafire    says:

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

patricktaylor says:

there will be a few rough edges

No pun intended, I'm sure.
Posted 14 months ago. ( permalink )

Luke Hardiman says:

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).
Posted 14 months ago. ( permalink )

wezm    says:

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.

damnItHarsh says:

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 ;) ).
Posted 14 months ago. ( permalink )

Jonny Haynes    says:

It breaks alot of sites compared to Safari and the others - I wonder which Webkit build they have used!
Posted 14 months ago. ( permalink )

iPjtr says:

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.
Posted 14 months ago. ( permalink )

John Muir says:

@damnItHarsh

FF2? Are you on Win 98??
Posted 14 months ago. ( permalink )

swein515    says:

Chrome will be stillborn on the Mac if it doesn't have full CSS3 support and Safari-grade rendering quality. Google surely knows this...
Posted 14 months ago. ( permalink )

oneighturbo    says:

nasty.
Posted 14 months ago. ( permalink )

kurafire    says:

@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.
Posted 14 months ago. ( permalink )

Guillermo Esteves    says:

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."
Posted 14 months ago. ( permalink )

[taaadAAAH!] says:

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 :)
Posted 14 months ago. ( permalink )

healingkid says:

Thanks for the comparison. Chrome's next iterations should get a lot of attention as well.
Posted 14 months ago. ( permalink )

OwlBoy says:

Maybe this is part of why it is so fast? :)
Posted 14 months ago. ( permalink )

dinolatoga.com says:

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-...
Posted 14 months ago. ( permalink )

- =Ben= - says:

Google Chrome Fail!
Posted 13 months ago. ( permalink )

mbadsey says:

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
Posted 2 months ago. ( permalink )