Google Chrome is frustrating me

At work I reg­u­larly use Chrome as a second browsers, it is a effi­cient browser, quick to fire up, small memory foot­print and renders stand­ard based web pages cor­rectly. How­ever, it will not replace that memory hog Fire­fox 3.1 as my main browser. As the Web Developer Tool­bar and Fire­bug are the tools of my trade.

I do find it annoy­ing that cur­rently Chrome is only avail­able for win­dows, which does limit my usage at home. No Chrome for my two Macs, two Ubuntu machines, just leav­ing the Vista media centre PC chromed at the moment. At least Google indic­ate Chrome will be avail­able for the Mac and Linux in the near future. So it is a minor nuis­ance, and not my point of frustration.

What I find frus­trat­ing is that even though Chrome is web­kit based, it does not always render as other web­kit based browsers such as Safari, when you are push­ing what can be done with mod­ern web browsers. Case in point, I am a big fan of pro­gress­ive enhance­ment with CSS3, if you view my art­icle on Pro­gress­ive enhance­ment with CSS3 at Web Mixed Grill, in any browser except Chrome (and IE6 because I was lazy and did not go bug hunt­ing). You will see what is pos­sible, an improved exper­i­ence for people with bet­ter browsers. The prob­lem is that while Chrome sup­ports border-radius and box-shadow and they work in isol­a­tion, in com­bin­a­tion, the area out­side the corner-radius, which is trans­par­ent without a box-shadow is now rendered solid black with a box-shadow. It is a known issue since Septem­ber and I assume at some stage it will be fixed.


css3 border radius + box shadow safari and chrome

Your cur­rent browser, Safari 3 and Chrome 1.0 ren­der­ing the same ele­ment. Over 50% of you will see three cir­cu­lar but­tons, around 10% will see a soft drop shadow behind the first but­ton and the 3% using Chrome two black boxes.

This is what I find frus­trat­ing, if Chrome did not sup­port border-radius or box-shadow, it would not be a prob­lem, because it would behave like most other browsers in com­mon use now and you could use those prop­er­ties together for pro­gress­ive enhance­ment to browsers that did. If some­body in the Chrome team, said “there is a issue with box-shadow on ele­ments with border-radius, it is going to take time to fix, lets switch off box-shadow on ele­ments with border-radius until we fix it”. Again not a prob­lem, Chrome would have bet­ter box-shadow sup­port that Fire­fox 3, but not per­fect. Unfor­tu­nately this is not the case, instead Chrome spoils it for every­body, because it breaks using these two properties.

Some people will be of the opin­ion, why care? 90% of other browsers do not sup­port these prop­er­ties, if a new browser gets them wrong, so what?

The logic behind pro­gress­ive enhance­ment with CSS3 is simply if a prop­erty is not sup­por­ted by a browser, it does not mat­ter, because the browser still get a usable ver­sion of the page. Which works fine with all ver­sions of Fire­fox, Safari, Inter­net Explorer 5+ (expect bugs) and 5 year old or less ver­sions of Opera. With Chrome it sup­ports the new prop­er­ties so badly so, you do not want to use that prop­erty com­bin­a­tion for other browsers, that do sup­port them prop­erly.

3 Responses to “Google Chrome is frustrating me”

  1. Alan Hogan Says:

    This is indeed inter­est­ing. I agree 100% with what you are say­ing. I have to say, I am curi­ous why Google’s ver­sion of web­kit has this bug, and I am dis­ap­poin­ted this made it into their stable 1.0 release.

    Any diver­gences from Safari’s ren­der­ing engine are highly unfor­tu­nate, 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 improve­ments that other web­kit browsers have. For example the prob­lem with border-radius and box-shadow, lack of sup­port for @font-face. In addi­tion the Chrome renders type dif­fer­ently from all other […]

  3. Tom Says:

    I also agree with what you are say­ing and would also like to point (not sure if this is a Win­dows issue or a Chrome issue?) that when you use the rotate or scale CSS3 trans­itions func­tions the qual­ity is really poor (check out my site: in chrome to see for yourself)

    It would be nice to see the qual­ity improved!