-webkit-transform removes border-radius clipping on child nodes

[Niklas]

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/

[Aron Allen]

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]

I have observed same issue.

[Tyler Crompton]

(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]

<rdar://problem/13205704>

[Adam Gamble]

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

Anything that makes the border-radius element a css stacking context should fix this.

[Adam Gamble]

Thanks, yes I noticed `isolation: isolate` on the outer element also worked.

[Fujii Hironori]

Created attachment 460826 [details]
test case

[Simon Fraser (smfr)]

https://jsfiddle.net/3umcnxdv/ and the attachment render as circles for me in recent builds. Is there any bug left here.

[Fujii Hironori]

Nothing. 254253@main fixed the bug.

*** This bug has been marked as a duplicate of bug 68196 ***