Bug 68196

Summary: border-radius clipping of composited layers doesn't work
Product: WebKit Reporter: Dave Hyatt <hyatt>
Component: Layout and RenderingAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: 7raivis, amaury.bauzac, anilsson, carrie.morrisons, chutten, drackett, ikushum, jay.bhaskar, karlcow, niklas.nordlund, sanjoy.pal, simon.fraser, vivekg
Priority: P2 Keywords: BrowserCompat, InRadar
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=67950
Attachments:
Description Flags
test case none

Dave Hyatt
Reported 2011-09-15 15:54:09 PDT
Broken out from https://bugs.webkit.org/show_bug.cgi?id=50072 See the test case I added with broken rendering in r95239 where a composited layer clipped by an uncomposited ancestor does not respect the border radius clip.
Attachments
test case (38 bytes, text/plain)
2013-01-22 21:37 PST, Binyamin 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2011-09-15 15:57:37 PDT
<rdar://problem/10133719>
Binyamin
Comment 2 2013-01-22 21:36:56 PST
Chrome related bug http://crbug.com/157218 Simplified test case http://jsfiddle.net/laukstein/bhmka/5/
Binyamin
Comment 3 2013-01-22 21:37:49 PST
Created attachment 184134 [details] test case
Sanjoy Pal
Comment 4 2013-06-18 04:04:43 PDT
<style> .outer { overflow: hidden; width: 100px; height: 100px; background-color: rgb(0,238,228); border: 3px solid #000; border-radius: 50%; } .inner { height: 100%; line-height: 5.8; text-align: center; background-color: rgba(255,0,0,.5); } .transform { -webkit-transform: translate3d(10px,10px,0); transform: translate3d(10px,10px,0); } </style> <html> <div class=outer> <div class="inner transform">with transformdfdfdsfdsf</div> </div> </html> While debugging this issue with the above html, <div class="inner transform"> is promoted to posZOrderList of <html> and gets a compositing layer. So, <html> also gets a compositing layer because of subtree reasons CompositingReasonClipsCompositingDescendants(as <div class="inner transform"> becomes child of <html> in paint-order). So, clippedByAncestor(RenderLayer* layer) for <div class="inner transform"> returns <html> element which is wrong. It should return <div class=outer> as clipping ancestor. As per my understanding, <div class="inner transform"> should be child of <div class=outer> in paint-order and <div class=outer> should also get a compositing layer and so that clipping works properly. Please correct me if my understanding is wrong.
Simon Fraser (smfr)
Comment 5 2022-08-31 14:40:14 PDT
*** Bug 140535 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 6 2022-08-31 14:40:20 PDT
*** Bug 146784 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 7 2022-08-31 14:40:28 PDT
*** Bug 230636 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 8 2022-08-31 15:59:31 PDT
Pull request: https://github.com/WebKit/WebKit/pull/3883
EWS
Comment 9 2022-09-07 16:11:03 PDT
Committed 254253@main (97910542b25d): <https://commits.webkit.org/254253@main> Reviewed commits have been landed. Closing PR #3883 and removing active labels.
Fujii Hironori
Comment 10 2022-10-03 17:36:53 PDT
*** Bug 67950 has been marked as a duplicate of this bug. ***
carrie.morrisons
Comment 11 2022-10-27 11:46:08 PDT
I'm seeing issues with videos that do not get cropped unless the parent has it's own stacking context: http://jsfiddle.net/0Lhy9ex6/
carrie.morrisons
Comment 12 2022-10-27 11:47:29 PDT
<p>Webkit border-radius clipping issue with overflow and videos</p> <div class=outer> <video controls="" width="250"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> </video> </div> Fixed with stacking context <div class="outer stack"> <video controls="" width="250"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> </video> </div> <style> .outer { overflow: hidden; width: 100px; height: 100px; background-color: rgb(0,238,228); border: 3px solid #000; border-radius: 50%; } .stack { isolation: isolate; }</style>
Simon Fraser (smfr)
Comment 13 2022-10-27 12:17:04 PDT
I am not reproducing that issue in Safari Tech Preview 156. If you can reproduce it there, please file a new bug with a screenshot.
carrie.morrisons
Comment 14 2022-10-27 13:21:37 PDT
Confirming issue resolved in Safari Tech Preview 156. Thankyou!
Simon Fraser (smfr)
Comment 15 2023-01-20 10:25:32 PST
*** Bug 238983 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 16 2023-02-20 15:41:49 PST
*** Bug 98538 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.