| Summary: | -webkit-transform removes border-radius clipping on child nodes | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Niklas <niklas.nordlund> | ||||
| Component: | Compositing | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | RESOLVED DUPLICATE | ||||||
| Severity: | Normal | CC: | adam.gamble, arturs.vonda+webkit, dbates, Hironori.Fujii, me, shanestephens, simon.fraser, tyler, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | 528+ (Nightly build) | ||||||
| Hardware: | Mac (Intel) | ||||||
| OS: | OS X 10.6 | ||||||
| URL: | http://jsfiddle.net/DkXuR/ | ||||||
| See Also: |
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 |
||||||
| Attachments: |
|
||||||
|
Description
Niklas
2011-09-12 13:04:56 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/ I have observed same issue. (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/ 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. Anything that makes the border-radius element a css stacking context should fix this. Thanks, yes I noticed `isolation: isolate` on the outer element also worked. Created attachment 460826 [details]
test case
https://jsfiddle.net/3umcnxdv/ and the attachment render as circles for me in recent builds. Is there any bug left here. Nothing. 254253@main fixed the bug. *** This bug has been marked as a duplicate of bug 68196 *** |