68196 2011-09-15 15:54:09 -0700 border-radius clipping of composited layers doesn't work 2023-02-20 15:41:49 -0800 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Unspecified Unspecified RESOLVED FIXED https://bugs.webkit.org/show_bug.cgi?id=67950 BrowserCompat, InRadar P2 Normal --- 1 hyatt simon.fraser 7raivis amaury.bauzac anilsson carrie.morrisons chutten drackett ikushum jay.bhaskar karlcow niklas.nordlund sanjoy.pal simon.fraser vivekg oldest_to_newest 468129 0 hyatt 2011-09-15 15:54:09 -0700 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. 468131 1 simon.fraser 2011-09-15 15:57:37 -0700 <rdar://problem/10133719> 813789 2 7raivis 2013-01-22 21:36:56 -0800 Chrome related bug http://crbug.com/157218 Simplified test case http://jsfiddle.net/laukstein/bhmka/5/ 813791 3 184134 7raivis 2013-01-22 21:37:49 -0800 Created attachment 184134 test case 901339 4 sanjoy.pal 2013-06-18 04:04:43 -0700 <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. 1895281 5 simon.fraser 2022-08-31 14:40:14 -0700 *** Bug 140535 has been marked as a duplicate of this bug. *** 1895283 6 simon.fraser 2022-08-31 14:40:20 -0700 *** Bug 146784 has been marked as a duplicate of this bug. *** 1895285 7 simon.fraser 2022-08-31 14:40:28 -0700 *** Bug 230636 has been marked as a duplicate of this bug. *** 1895326 8 simon.fraser 2022-08-31 15:59:31 -0700 Pull request: https://github.com/WebKit/WebKit/pull/3883 1896917 9 ews-feeder 2022-09-07 16:11:03 -0700 Committed 254253@main (97910542b25d): <https://commits.webkit.org/254253@main> Reviewed commits have been landed. Closing PR #3883 and removing active labels. 1902994 10 fujii 2022-10-03 17:36:53 -0700 *** Bug 67950 has been marked as a duplicate of this bug. *** 1908789 11 carrie.morrisons 2022-10-27 11:46:08 -0700 I'm seeing issues with videos that do not get cropped unless the parent has it's own stacking context: http://jsfiddle.net/0Lhy9ex6/ 1908790 12 carrie.morrisons 2022-10-27 11:47:29 -0700 <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> 1908800 13 simon.fraser 2022-10-27 12:17:04 -0700 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. 1908812 14 carrie.morrisons 2022-10-27 13:21:37 -0700 Confirming issue resolved in Safari Tech Preview 156. Thankyou! 1926958 15 simon.fraser 2023-01-20 10:25:32 -0800 *** Bug 238983 has been marked as a duplicate of this bug. *** 1935306 16 simon.fraser 2023-02-20 15:41:49 -0800 *** Bug 98538 has been marked as a duplicate of this bug. *** 184134 2013-01-22 21:37:49 -0800 2022-08-31 14:39:58 -0700 test case url.txt text/plain 38 7raivis aHR0cDovL2pzZmlkZGxlLm5ldC9sYXVrc3RlaW4vYmhta2EvNS8=