Bug 72619 - border-radius does not "hide" inner content when overflow:hidden is specified
Summary: border-radius does not "hide" inner content when overflow:hidden is specified
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P4 Major
Assignee: Nobody
Depends on:
Reported: 2011-11-17 08:23 PST by Manolis Kp.
Modified: 2012-11-14 02:07 PST (History)
20 users (show)

See Also:

Bugged / Expected Result (25.25 KB, image/png)
2011-11-17 08:32 PST, Manolis Kp.
no flags Details
The HTML file that will generate the bug in webkit (1.62 KB, text/html)
2011-11-30 23:19 PST, Manolis Kp.
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Manolis Kp. 2011-11-17 08:23:55 PST
When an HTML element has border-radius specified and overflow:hidden, an element contained within, is visible outside the border at the corners of the parent element while it shouldn't.
Comment 1 Manolis Kp. 2011-11-17 08:32:22 PST
Created attachment 115599 [details]
Bugged / Expected Result
Comment 2 Shane Stephens 2011-11-30 20:00:14 PST
Can you please upload a html test case (e.g. the one you used to generate the attached images)
Comment 3 Manolis Kp. 2011-11-30 23:19:18 PST
Created attachment 117350 [details]
The HTML file that will generate the bug in webkit

As you will notice there is one div element inside another, in the html file.
The outer div has position:relative style as well as overflow:hidden.
The inner div is larger than the outer div, it gets hidden but not at the corner areas.
I noticed that if the outer div does not specify position:relative and the inner does not specify position:absolute then it works as expected.
So it seems there is a problem with the positioning types.

However the above html code works well with Firefox (and as expected).
Comment 4 ellislau 2012-01-10 09:35:50 PST
I find that it's sufficient for the bug to be triggered whenever the outer div has overflow:hidden, border-radius, and a position style of anything other than static (relative, absolute, fixed).
Any extra css can be removed, though having a border or a background color on the outer div helps to make the bug visible.
Comment 5 codabugs 2012-01-26 15:12:30 PST
As this bug still has a status of 'unconfirmed' I'd also like to confirm I'm seeing this behaviour in Webkit browsers.

I'd imagine the approach of using a 'responsive' sized container to crop a static image is becoming more frequent, so having consistent spec interpretation/implementation that matches user expectations is important.
Comment 6 Manolis Kp. 2012-01-26 23:13:53 PST
This bug has been submitted months ago, and its a pretty important one as it causes unexpected behavior when border-radius is used. Why is it still unconfirmed? The HTML provided clearly generates the bug. (using both Chrome 17.0.963.44 beta and Safari 5.1.2, including Safari for iOS)
Comment 7 S3 2012-02-27 17:56:17 PST
I've just encountered this dreadful bug myself. Why is this still unconfirmed and why hasn't anyone been assign to fix this?
Comment 8 Misha Reyzlin 2012-02-28 09:20:55 PST
I am confirming this bug as well. Please fix
Comment 9 Dave 2012-02-28 12:37:06 PST
Is there any progress on this? It's definitely still present and I've even seen blog posts about the issue dating back to 2009.

I was most saddened that I this works in FF & IE9 and even in IE7 & 8 with a little help from PIE.htc. 

I guess it's not had any movement. :'(
Comment 10 Zero Piraeus 2012-03-02 15:04:00 PST
Another confirmation here ...
Comment 11 joeshmoe301 2012-04-27 08:27:58 PDT
I have been experiencing this problem for about a year.  Please fix.
Comment 12 Charles Dorner 2012-04-28 12:06:30 PDT
Position static works:


Position relative fails:


Position absolute fails:


Position fixed fails:

Comment 13 Charles Dorner 2012-04-28 12:12:48 PDT
Messed up the links, use these

Position static works: http://jsfiddle.net/7Z5U4/

Position relative fails: http://jsfiddle.net/ex47z/2/

Position absolute fails: http://jsfiddle.net/RcRKH/2/

Position fixed fails: http://jsfiddle.net/jCdL3/
Comment 14 M Andersen 2012-06-15 00:17:35 PDT
And another confirmation... Please review/address this issue! It's quite a pain to deal with, and has been for quite some time.
Comment 15 Benoît Burgener 2012-07-13 01:35:26 PDT
It's even more annoying with overflow-x:auto & overflow-y:hidden where you can't set the border-radius to the child since it scroll. Please, do something.
Comment 16 Mark Smits 2012-08-06 05:15:40 PDT
Can confirm the same behavior for children elements positioned other than static.
Firefox gives the expected results.
Comment 17 Jens Christian Rodi Hansen 2012-08-24 13:26:19 PDT
One more confirmation. So happy to find that I'm looking at at bug (not me missing something in the css).

I see the problem with a div>ul>li structure. The div have the rounded corners and overflow:hidden, the ul has position:absolute and the li's have position:relative. Both ul and li have a background color, which exceeds the rounded corners of the parent div.

Works fine in Firefox 14, but fails in official Chrome and Version 23.0.1244.0
Comment 18 piersh 2012-09-05 14:27:52 PDT
referincing Chromium bug: http://code.google.com/p/chromium/issues/detail?id=62363

additional test case: http://jsfiddle.net/N2cXJ/1/

     Safari 5: FAIL
    Chrome 21: FAIL
   Firefox 15: OK
         IE 9: OK
Comment 19 Paul Irish 2012-09-11 10:45:10 PDT
In addition to http://crbug.com/62363 , looks like http://crbug.com/71639 is also downstream.

Bonus: 71639 is only one digit difference from this bug ID, 72619 !
Comment 20 Ido Rosenthal 2012-09-15 04:03:28 PDT
waiting for this fix for years now. please fix.
Comment 21 Binyamin 2012-09-15 23:49:00 PDT
The same bug #77572
Comment 22 S3 2012-09-16 07:41:17 PDT
Still unfixed after almost one year.
Comment 23 David Rodrigues 2012-10-01 04:15:34 PDT
Nothing until now?
Even Internet Explorer support that!

Comment 24 Jens Christian Rodi Hansen 2012-10-22 00:42:44 PDT
I can see that the seemingly related bug 71639 (https://code.google.com/p/chromium/issues/detail?id=71639) was fixed in the latest canary build of Chrome (24.0.1303.0).

It did unfortunately not fix this bug.
Comment 25 Manolis Kp. 2012-11-14 02:07:14 PST
This issue has been fixed, marking as resolved