| Summary: | border-radius clipping of composited layers doesn't work | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Dave Hyatt <hyatt> | ||||
| Component: | Layout and Rendering | Assignee: | 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
Dave Hyatt
2011-09-15 15:54:09 PDT
Chrome related bug http://crbug.com/157218 Simplified test case http://jsfiddle.net/laukstein/bhmka/5/ Created attachment 184134 [details]
test case
<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.
*** Bug 140535 has been marked as a duplicate of this bug. *** *** Bug 146784 has been marked as a duplicate of this bug. *** *** Bug 230636 has been marked as a duplicate of this bug. *** Pull request: https://github.com/WebKit/WebKit/pull/3883 Committed 254253@main (97910542b25d): <https://commits.webkit.org/254253@main> Reviewed commits have been landed. Closing PR #3883 and removing active labels. *** Bug 67950 has been marked as a duplicate of this bug. *** I'm seeing issues with videos that do not get cropped unless the parent has it's own stacking context: http://jsfiddle.net/0Lhy9ex6/ <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>
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. Confirming issue resolved in Safari Tech Preview 156. Thankyou! *** Bug 238983 has been marked as a duplicate of this bug. *** *** Bug 98538 has been marked as a duplicate of this bug. *** |