RESOLVED DUPLICATE of bug 68196 67950
-webkit-transform removes border-radius clipping on child nodes 
https://bugs.webkit.org/show_bug.cgi?id=67950
Summary -webkit-transform removes border-radius clipping on child nodes
Niklas
Reported 2011-09-12 13:04:56 PDT
When using border-radius on parent element (with overflow:hidden) the child nodes are clipped according to the radius. However, is any -webkit-transform property is used on the parent or the child nodes the border-radius is lost. Example available here: http://jsfiddle.net/DkXuR/
Attachments
test case (432 bytes, text/html)
2022-07-12 14:26 PDT, Fujii Hironori 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Aron Allen
Comment 1 2011-11-03 03:18:55 PDT
I can confirm this bug as well. The latest Firefox release renders the content properly, but the rendering bug is in both Chrome and Safari at the moment. Look at my switch project to see the big, and compare with the rendering in Firefox http://aronallen.com/samples/switch/
Arturs Vonda
Comment 2 2012-01-19 03:33:24 PST
I have observed same issue.
Tyler Crompton
Comment 3 2012-06-07 08:40:15 PDT
(In reply to comment #0) > When using border-radius on parent element (with overflow:hidden) the child nodes are clipped according to the radius. However, is any -webkit-transform property is used on the parent or the child nodes the border-radius is lost. > > Example available here: http://jsfiddle.net/DkXuR/ The border-radius is still there. It's just not hiding the overflowed content. See http://jsfiddle.net/DkXuR/5/
Radar WebKit Bug Importer
Comment 4 2013-02-13 00:45:01 PST
<rdar://problem/13205704>
Adam Gamble
Comment 5 2022-07-07 05:39:18 PDT
I cannot reproduce the issue in original fiddle. But a very similar bug still exists: https://jsfiddle.net/3umcnxdv/ This happens when applying `translateZ` to a child element. As a workaround, setting `clip-path: border-box` to the outer element prevents overflow.
Simon Fraser (smfr)
Comment 6 2022-07-10 21:04:32 PDT
Anything that makes the border-radius element a css stacking context should fix this.
Adam Gamble
Comment 7 2022-07-11 02:23:11 PDT
Thanks, yes I noticed `isolation: isolate` on the outer element also worked.
Fujii Hironori
Comment 8 2022-07-12 14:26:41 PDT
Created attachment 460826 [details] test case
Simon Fraser (smfr)
Comment 9 2022-10-03 15:32:28 PDT
https://jsfiddle.net/3umcnxdv/ and the attachment render as circles for me in recent builds. Is there any bug left here.
Fujii Hironori
Comment 10 2022-10-03 17:36:53 PDT
Nothing. 254253@main fixed the bug. *** This bug has been marked as a duplicate of bug 68196 ***
Note You need to log in before you can comment on or make changes to this bug.