67950 2011-09-12 13:04:56 -0700 -webkit-transform removes border-radius clipping on child nodes 2022-10-03 17:36:53 -0700 1 1 1 Unclassified WebKit Compositing 528+ (Nightly build) Mac (Intel) OS X 10.6 RESOLVED DUPLICATE 68196 https://bugs.webkit.org/show_bug.cgi?id=230636 https://bugs.webkit.org/show_bug.cgi?id=140535 https://bugs.webkit.org/show_bug.cgi?id=68196 http://jsfiddle.net/DkXuR/ InRadar P2 Normal --- 1 niklas.nordlund webkit-unassigned adam.gamble arturs.vonda+webkit dbates fujii me shanestephens simon.fraser tyler webkit-bug-importer oldest_to_newest 465751 0 niklas.nordlund 2011-09-12 13:04:56 -0700 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/ 495310 1 me 2011-11-03 03:18:55 -0700 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/ 538591 2 arturs.vonda+webkit 2012-01-19 03:33:24 -0800 I have observed same issue. 643579 3 tyler 2012-06-07 08:40:15 -0700 (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/ 831705 4 webkit-bug-importer 2013-02-13 00:45:01 -0800 <rdar://problem/13205704> 1881296 5 adam.gamble 2022-07-07 05:39:18 -0700 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. 1882012 6 simon.fraser 2022-07-10 21:04:32 -0700 Anything that makes the border-radius element a css stacking context should fix this. 1882037 7 adam.gamble 2022-07-11 02:23:11 -0700 Thanks, yes I noticed `isolation: isolate` on the outer element also worked. 1882578 8 460826 fujii 2022-07-12 14:26:41 -0700 Created attachment 460826 test case 1902958 9 simon.fraser 2022-10-03 15:32:28 -0700 https://jsfiddle.net/3umcnxdv/ and the attachment render as circles for me in recent builds. Is there any bug left here. 1902993 10 fujii 2022-10-03 17:36:53 -0700 Nothing. 254253@main fixed the bug. *** This bug has been marked as a duplicate of bug 68196 *** 460826 2022-07-12 14:26:41 -0700 2022-07-12 14:26:41 -0700 test case a.html text/html 432 fujii PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogICAgPGhlYWQ+Cgk8c3R5bGU+CgkgLm91dGVyIHsKICAg ICAgICAgICAgIHdpZHRoOiAzMDBweDsKICAgICAgICAgICAgIGhlaWdodDogMzAwcHg7CiAgICAg ICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7CiAgICAgICAgICAgICBvdmVyZmxvdzogaGlkZGVu OwoJIH0KCSAuaW5uZXIgewogICAgICAgICAgICAgYmFja2dyb3VuZDogZ3JlZW47CiAgICAgICAg ICAgICBoZWlnaHQ6IDEwMCU7CgkgICAgIHdpbGwtY2hhbmdlOiB0cmFuc2Zvcm07CgkgfQoJPC9z dHlsZT4KICAgIDwvaGVhZD4KICAgIDxib2R5PgoJWW91IHNob3VsZCBzZWUgYSBncmVlbiBjaXJj bGUuCgk8ZGl2IGNsYXNzPSJvdXRlciI+CgkgICAgPGRpdiBjbGFzcz0iaW5uZXIiPgoJICAgIDwv ZGl2PgoJPC9kaXY+CiAgICA8L2JvZHk+CjwvaHRtbD4K