Google Chrome is frustrating me

At work I regularly use Chrome as a second browsers, it is a efficient browser, quick to fire up, small memory footprint and renders standard based web pages correctly. However, it will not replace that memory hog Firefox 3.1 as my main browser. As the Web Developer Toolbar and Firebug are the tools of my trade.

I do find it annoying that currently Chrome is only available for windows, which does limit my usage at home. No Chrome for my two Macs, two Ubuntu machines, just leaving the Vista media centre PC chromed at the moment. At least Google indicate Chrome will be available for the Mac and Linux in the near future. So it is a minor nuisance, and not my point of frustration.

What I find frustrating is that even though Chrome is webkit based, it does not always render as other webkit based browsers such as Safari, when you are pushing what can be done with modern web browsers. Case in point, I am a big fan of progressive enhancement with CSS3, if you view my article on Progressive enhancement with CSS3 at Web Mixed Grill, in any browser except Chrome (and IE6 because I was lazy and did not go bug hunting). You will see what is possible, an improved experience for people with better browsers. The problem is that while Chrome supports border-radius and box-shadow and they work in isolation, in combination, the area outside the corner-radius, which is transparent without a box-shadow is now rendered solid black with a box-shadow. It is a known issue since September and I assume at some stage it will be fixed.

>

css3 border radius + box shadow safari and chrome

Your current browser, Safari 3 and Chrome 1.0 rendering the same element. Over 50% of you will see three circular buttons, around 10% will see a soft drop shadow behind the first button and the 3% using Chrome two black boxes.

This is what I find frustrating, if Chrome did not support border-radius or box-shadow, it would not be a problem, because it would behave like most other browsers in common use now and you could use those properties together for progressive enhancement to browsers that did. If somebody in the Chrome team, said “there is a issue with box-shadow on elements with border-radius, it is going to take time to fix, lets switch off box-shadow on elements with border-radius until we fix it”. Again not a problem, Chrome would have better box-shadow support that Firefox 3, but not perfect. Unfortunately this is not the case, instead Chrome spoils it for everybody, because it breaks using these two properties.

Some people will be of the opinion, why care? 90% of other browsers do not support these properties, if a new browser gets them wrong, so what?

The logic behind progressive enhancement with CSS3 is simply if a property is not supported by a browser, it does not matter, because the browser still get a usable version of the page. Which works fine with all versions of Firefox, Safari, Internet Explorer 5+ (expect bugs) and 5 year old or less versions of Opera. With Chrome it supports the new properties so badly so, you do not want to use that property combination for other browsers, that do support them properly.

3 Responses to “Google Chrome is frustrating me”

  1. Alan Hogan Says:

    This is indeed interesting. I agree 100% with what you are saying. I have to say, I am curious why Google’s version of webkit has this bug, and I am disappointed this made it into their stable 1.0 release.

    Any divergences from Safari’s rendering engine are highly unfortunate, since there is no way to test Chrome on Mac (or Linux).

  2. Nick Cowie » Browsers I rather not support Says:

    [...] too early and has not included recent improvements that other webkit browsers have. For example the problem with border-radius and box-shadow, lack of support for @font-face. In addition the Chrome renders type differently from all other [...]

  3. Tom Says:

    I also agree with what you are saying and would also like to point (not sure if this is a Windows issue or a Chrome issue?) that when you use the rotate or scale CSS3 transitions functions the quality is really poor (check out my site: http://www.idle-words.co.uk in chrome to see for yourself)

    It would be nice to see the quality improved!

Google