Saturday, February 14, 2009

Google's Chrome is a big pile of shit

Google recently decided to get into the browser game by releasing Chrome on Windows. Chrome is a Webkit-based browser, like many that I mentioned here, but Google have managed to fuck up the way in which it renders pages.

Let me explain, via the medium of this divs displayed below...

What you will see using various browsers is a grey box, and then a near-black box within it. Plus:
  • Safari, Webkit, Cruz, Shiira, Stainless or any other Webkit-based browser*: you will see rounded corners and they will be smooth (anti-aliased), and you will see a smooth, grey drop shadow.

  • Firefox 3: you will see rounded corners and they will be smooth (anti-aliased).

  • Firefox 2: you will see rounded corners, but they will look fairly pixellated.

  • Internet Exploder: you will see neither rounded corners nor drop-shadow, just a box with normal, square corners.

  • *Chrome: unlike other Webkit-based browsers, you will see pixellated looking corners and the drop-shadow will not fade out to the background colour, but will have ugly white surrounds.

    UPDATE: actually, the drop shadow does seem to be working, but the rounded corners are not. On the interface that we are currently working on, we definitely see the rounded corners but the drop-shadow fades to white, not the background colour. Bizarre.


Webkit is the rendering engine that Chrome is based on: it is open source and, as far as Cascading Style Sheets (CSS) is concerned, one of the... sorry... the most advanced browser in the world.

And Google have managed to take the provided rendering engine and fuck it up.

But worse than that, they haven't managed to fuck it up properly. If a particular property is not supported properly—as, for instance, neither border-radius nor box-shadow are in IE—then the browser should ignore those properties.

Chrome recognises the properties and then comprehensively fucks them up. This is a serious issue, especially for the UI that I am working on, which makes extensive use of rounded corners and drop shadows.

Normally, I could introduce a piece of Javascript that would "sniff" out which browser was accessing the page, but Chrome is a Webkit browser and it is Webkit properties that it is fucking up.

It's a bit of a nightmare. Seriously, Google, get a fucking grip...

24 comments:

Simon Dyda said...

I'm using Chrome at the moment. Hopefully they'll get these things sorted out. My main gripe up until now has been that Chrome doesn't work with Evernote.

Roger Thornhill said...

Sounds like Google have begun to be infected with the same malaise that Microsoft had when it came in contact with HTML and Java.

Arrogance borne from monopoly, p'raps?

Anonymous said...

'*Chrome: unlike other Webkit-based browsers, you will see pixellated looking corners and the drop-shadow will not fade out to the background colour, but will have ugly white surrounds.'

There are no smoothed corners (as the rounded corners have black right angle points) and the drop shadow does in fact fade to the background colour.
what ugly white surrounds?

bm said...

I see a drop shadow on Chrome but not on FF3. Chrome has square corners that mess up the pattern a bit, but I think the box looks better on Chrome than FF.

I will say, though, that I hate Chrome immensely. Like most browsers, the default settings are just plain stupid, but unlike other browsers, there's no way to change any of the settings that matter.

Henry North London said...

I use firefox 3

My whole address book has been harvested by this stupid Yaari thing

Please ignore it or suffer the same consequences

Shit thats the last time I do that

Deadbeat Dad said...

Who gives a fuck about rounded corners or drop shadows, really? Web developers would be better advised to focus their attention on ergonomics and performance.

Webkit may well have a great future but, here and now (in the real world), Firefox and its myriad extensions leave everything else trailing by a country mile in terms of functionality and security.

Devil's Kitchen said...

DD,

"Who gives a fuck about rounded corners or drop shadows, really? Web developers would be better advised to focus their attention on ergonomics and performance."

1) At my company, we are concentrating extremely hard on "ergonomics and performance".

2) Things such as rounded corners and drop shadows are important for UI design. In our app, a number of windows sit over others at times: a drop shadow is indispensible for indicating layering.

3) Using CSS to create drop shadows and rounded corners cuts -- massively -- the amount of code and images that need to be used: and this, you see, improves performance.

DK

Anonymous said...

wooooo...rounded corners

Anonymous said...

I would have put a styled p tag inside a div, but then that because I fucking hate nested divs

My own current dev site has only the number of divs absolutely essential to display the page, average of 5 NONE of which are nested. It's also fully strict xhtml and WCAG Level 2 compliant, a first for any UK newspaper.

So stick that in your webkit and smeek it.

Graeme Tote said...

Devil, if your blog is any representative of your design or ergonomic skills, chrome's ugly corners are the least your concerns.

But I'm quite positive your skills have improved immeasurably in the last four years.

Why not allow google's young product the same opportunity to improve?

Charlotte Gore said...

On Chrome on my PC the problem seems to be that the top div doesn't have rounded corners which makes the rounded shadow look really stupid.

What you appear to have is a technique that only really works on Safari, so very few people are ever going to see the proper design as intended.

Is CSS 3 really stable and supported enough for this sort of implementation just now?

Deadbeat Dad said...

Things such as rounded corners and drop shadows are important for UI design. In our app, a number of windows sit over others at times: a drop shadow is indispensible for indicating layering.

I wouldn't disagree: rounded corners and drop shadows are part of the basic vocabulary of visual design. In an ideal world, all browsers would support such standards. My point was that the prevailing realities of web design, in general, impose far more pressing issues. In any case, there are simple and effective ways of circumventing the limitations you describe. In three or four years' time -- perhaps sooner -- this argument will no doubt have been consigned to the dustbin of history.

Using CSS to create drop shadows and rounded corners cuts -- massively -- the amount of code and images that need to be used: and this, you see, improves performance.

Of course it does, and I am an ardent evangelist of Cascading Style Sheets (probably the most important innovation on the web since the invention of HTML itself). Nevertheless: I do recall a time, in the not-too-distant past (ca. 2007), when The Kitchen itself was so laden with scripts and 3rd party fripperies that it was virtually unusable. Or is my memory playing tricks on me?

For anybody whose computer needs extend beyond the limitations of their own desk, the web browser is the probably the most important piece of software outside of the operating system itself. In this respect -- balancing form against functionality -- nothing comes close to Firefox at the moment.

Devil's Kitchen said...

Graeme,

"Devil, if your blog is any representative of your design or ergonomic skills, chrome's ugly corners are the least your concerns."

This blog does what it needs to do, i.e. people can read it. And whilst you might feel that the design is crap, I'm happy to point out that those who voted in the Witanagemot Club Awards don't agree: this has come first in the Best Blog Design category for the last two years.

It does need to be updated, sure, but I don't have the time at the moment.

"Why not allow google's young product the same opportunity to improve?"

The point that I was making was that the bits that are bust have evolved over years -- through Webkit's development. Why did Chrome take the existing engine and break it: the makers of Shiira, Cruz and Stainless (for instance) didn't feel the need to do that.

"My point was that the prevailing realities of web design, in general, impose far more pressing issues."

Sure; but I am working on an interface that needs to work through a web browser and my point was that rounded corners and shadows are important in that situation.

"In any case, there are simple and effective ways of circumventing the limitations you describe."

There are no simpler ways of making drop shadows or rounded corners. And the point is that targeting Chrome -- so that one can deploy said fixes -- is difficult.

"In three or four years' time -- perhaps sooner -- this argument will no doubt have been consigned to the dustbin of history."

Amen to that, brother.

"Nevertheless: I do recall a time, in the not-too-distant past (ca. 2007), when The Kitchen itself was so laden with scripts and 3rd party fripperies that it was virtually unusable."

That has, of course, nothing to do with CSS. However, you are right and many were stripped out; obviously, I have very little control over the performance of "third-party fripperies" and the one that was really slowing things up was Blogroll -- which, typically, was (and, for the moment, remains*) the one indispensable third party add-on I have.

"In this respect -- balancing form against functionality -- nothing comes close to Firefox at the moment."

I happen to disagree -- Firefox feels very clunky on my Mac (2 x 2GHz Dual Core Xeons) -- but I see your point. Unfortunately, this is often because application makers either put in too many features, or not enough.

Webkit's biggest problem, at present, is that the near-ubiquitous FCK Editor does not work on it...

DK


* When I finally get around to redesigning the blog, I shall probably adopt Blogger's linklist, but I haven't got time to convert my template to their new version. I am still running a "Classic" template.

Devil's Kitchen said...

(Sorry, second part of my comment above was addressed to DD.)

Charlotte,

"Is CSS 3 really stable and supported enough for this sort of implementation just now?"

Well, that depends on the browser (by the way, the drop shadow works in Firefox 3.1, currently in Beta 2).

Personally, I prefer to use CSS3 by default, and then hack for browsers that don't support it.

If we -- designers, browser manufacturers and users -- do not push these boundaries, nothing will actually improve.

As such, I will always push for people to use a "modern" browser (Firefox or Webkit) as much as I can. The fact that so many are still using IE6, for instance, is unbelievably irritating; I would prefer to point out that they are missing out, and urge them to upgrade.

DK

Charlotte Gore said...

True enough. Die, IE6, Die.

Henry North London said...

Yes the poor NHS has to suffer with IE6 and no javascript Its a veritable disaster area

I used to load firefox on to every machine I could lay my hands on

T said...

My install of Chrome doesn't fit your description. This is how it looks:

http://i41.tinypic.com/2ch2gjo.png

That's on Chrome 1.0.154.48

Anonymous said...

Well I'm using Firefox 3.0.5 and I don't see any drop-shadow.

Not that I care much.

I am not going within a mile of Chrome, since I heard that it phones home.

Until I know what it's up to, it is not coming near any of my systems.

Abhinav K said...

I am using Firefox 3.5 RC3 and my experience is the same that I had on Safari. But it looks better than safari...

Anonymous said...

I ♥ Google Chrome
I don't see how a few little details are so bad in your opinion compared to the amazing loading/download speed. It's ridiculously faster than IE, Firefox and Safari on my pc.

Danny said...

Sorry, but there's absolutely nothing wrong with Chrome.

Most things you've mentioned - I'm not experiencing. The only thing I can say that we are both experiencing is a lack of anti aliasing (although I must say I only seem to be experiencing that on your page :) )

cybacolt said...

so google releases a BETA browser, and you whinge that bleeding edge CSS3 stuff isnt working? pfft...

incidently, dont you need FF 3.5 to get reasonable CSS3 support working anyway? which i dont even think was around when you wrote this...

ps - 7 months later, this is all working fine... sure the corner aliasing still sucks, but its better than ANYTHING microsoft have released browser wise. ever.

Devil's Kitchen said...

Cybacolt,

"so google releases a BETA browser, and you whinge that bleeding edge CSS3 stuff isnt working? pfft..."

The CSS rendering engine in Chrome is not written by Google—it is a rendering engine called Webkit which is, in fact, an Open Source project sponsored by Apple.

My objection is the fact that Google have taken the Webkit rendering engine—one that renders the above example correctly—and broken it.

They actually took a working engine and then broke it. Do you see the difference between this and them writing one from scratch?

"incidently, dont you need FF 3.5 to get reasonable CSS3 support working anyway? which i dont even think was around when you wrote this..."

No. Webkit is far more advanced in terms of CSS3 rendering (and beyond) than FF 3.5.

"ps - 7 months later, this is all working fine... sure the corner aliasing still sucks..."

So, Google have still broken the Webkit rendering engine: in unbroken Webkit browsers the corners are smooth and properly anti-aliased.

So, Chrome is still broken: nice one, Google...

"... but its better than ANYTHING microsoft have released browser wise. ever."

You won't find me disagreeing with you there...

DK

You'll not find me disagreeing with you there.

DK

windturbineben16 said...

ive just tried it yup its quick but im a multi tab user (sometimes have around 50 on there )
but after around 20 there's no picture or words as unlike ff all tabs are in the same plase no scrolling from side to side good ehh

but you end up clicking about 5 different tabs in an airea just to get to the one you want cos you dont know where it is just a white box

also ff loads several tabs at once and then moves on when ff is first started unlike all at once
also just say you click on the end tab when ff is loading the first ones it automatically loads as well

fantastic