overflow:hidden works in Firefox but not in Chrome. Why?

I have been trying to开发者_StackOverflow play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.

Here is the link:

http://alonbt.com/css3/netscape/

The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.

Any suggestions bout what might be the problem?

I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html

In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072

The issue shows up in Safari too.

You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').

Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).

I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).