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

Question

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

Here is the link:

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?

Nicely done! It seems it might be a problem with `border-radius` with `overflow:hidden` as you said. It seems as though webkit doesn't understand those two combined, and treats it as though it was rectangular. You should consider filing a bug report to webkit. http://www.webkit.org/quality/reporting.html — mqchen, Aug 08 '11 at 00:43
Great stuff! Perhaps the bug you're encountering is this one: http://code.google.com/p/chromium/issues/detail?id=60005. This may be a similar issue: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera, which the poster was able to solve. I noticed that taking 'position: relative' out on `whiteCircle` and `blackCircle` and moving them with negative margins instead worked better, but you've probably got a better idea of how to achieve the effect you're looking for. — g_thom, Aug 08 '11 at 01:00
hey, nice job. If you like, fork my [Github project](https://github.com/thomas4g/CSS-Art) and add it to the collection. :) ...it's much nicer than any of mine. — Thomas Shields, Aug 08 '11 at 01:04

score 2 · Answer 1 · answered Aug 11 '11 at 05:51

2

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.

answered Aug 11 '11 at 05:51

bluesmoon

3,918
3
25
30

I have to say I'm very surprised to see an issue like this in Webkit. – jffgrdnr Apr 02 '12 at 17:09
It will be great if you'll add more details to the answer, not just drop a few links. – Pavlo Dec 26 '12 at 08:10

score 0 · Answer 2 · answered Jul 16 '13 at 13:13

0

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).

answered Jul 16 '13 at 13:13

Sander de Snaijer

1
1

score 0 · Answer 3 · answered Aug 14 '11 at 20:17

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).

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

3 Answers3