The overflowing parts of drop-shadowed elements do not cast shadows
Reported by
alonmis...@gmail.com,
Jan 23 2018
|
||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
Steps to reproduce the problem:
Render the following:
<svg>
<foreignObject x="0" y="0" width="100px" height="100px">
<div id="container">
<div id="shadower">
<div class="floater" id="floater1"></div>
<div class="floater" id="floater2"></div>
<div class="floater" id="floater3"></div>
</div>
</div>
</foreignObject>
</svg>
With the following CSS:
svg {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
div {
display: inline-block
}
#container, #shadower {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
#shadower {
filter: drop-shadow(-10px 0 0 yellow);
clip-path: inset(0);
}
.floater {
height: 30px;
width: 30px;
background-color: red;
position: absolute;
}
#floater1 {
right: -15px;
top: 2px;
}
#floater2 {
right: -25px;
top: 35px;
}
#floater3 {
right: -30px;
bottom: 2px;
}
What is the expected behavior?
The three red "floater" boxes should each cast a 10px shadow to the left. That's also how it behaves on Firefox.
What went wrong?
On Chrome and Safari, the bottom two boxes cast more narrow shadows - 5px and 0px. Looks like the clipped parts do not cast any shadows.
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 63.0.3239.132 Channel: stable
OS Version: OS X 10.13.2
Flash Version:
This creates discrepancy between how the HTML behaves outside and inside foreignObject.
,
Jan 23 2018
I see the same on Mac as on Windows.
,
Jan 23 2018
I'm using Firefox 57.0.4. Loading the attached file indeed shows the cropped shadows in Firefox, just like Chrome; the behavior I observed before was in jsfiddle, where Firefox looks fine while Chrome doesn't (https://jsfiddle.net/r9ahbb5g/).
,
Jan 23 2018
Thank you for providing more feedback. Adding requester "schenney@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jan 23 2018
With the jsfiddle I can reproduce the problem. Odd that the behavior differs in jsfiddle. Something about the iframe embedding the content, I suspect, or how it treats SVG. We won't be able to look into fixing this until we resolve the issues with layer positions in SVG foreign object. SO marking it as blocked on that.
,
Apr 26 2018
I can now reproduce the problem without jsfiddle and without a container SVG (so I guess the title and component are no longer accurate; should I open a new bug instead?) I attached a smaller file which now reproduces it. It shows up fine in Firefox, but with incorrect shadows in Chrome 66.0.3359.117. Either "overflow: hidden" or a clip-path trigger it.
,
Apr 26 2018
We rename the bug in this case, and adjust the labels. The same team is responsible for the bug.
,
Apr 26 2018
The difference appears to be that Firefox uses the pre-clipped bounds of the child elements as the input to the filter, whereas Chrome and Safari use the post-clipped. Since the clipping element is above the filter, this does seem wrong.
,
Apr 26 2018
The problem is that in PaintLayerPainter, we collect fragments up to context.root_layer. But clip-path does not induce a new root_layer starting at that PaintLayer. It should do so.
,
Apr 26 2018
s/clip-path/filter/
,
Apr 27 2018
SPv175 fixes half of this bug. The second child now paints correctly. The third child is still clipped out by the cull rect.
,
Apr 27 2018
Patch in progress.
,
Apr 27 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/699177eecef79fd624f813dd53024a03cdd86ed8 commit 699177eecef79fd624f813dd53024a03cdd86ed8 Author: Chris Harrelson <chrishtr@chromium.org> Date: Fri Apr 27 23:06:48 2018 [PE] Update painting root & reset cull rect when painting under a filter which moves pixels. Filters which move pixels may move content which is originally outside of the cull rect or ancestor clip rects back into view. Therefore we should adjust the painting root to prevent ancestor clips and cull rects from clipping or culling out the source of the filter. Bug: 804670 Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Change-Id: I6e1032ecef5fcb5eabb6080bd2f17d8c479dc1e8 Reviewed-on: https://chromium-review.googlesource.com/1033347 Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#554550} [modify] https://crrev.com/699177eecef79fd624f813dd53024a03cdd86ed8/third_party/WebKit/LayoutTests/TestExpectations [add] https://crrev.com/699177eecef79fd624f813dd53024a03cdd86ed8/third_party/WebKit/LayoutTests/paint/filters/drop-shadow-clipped-expected.html [add] https://crrev.com/699177eecef79fd624f813dd53024a03cdd86ed8/third_party/WebKit/LayoutTests/paint/filters/drop-shadow-clipped.html [modify] https://crrev.com/699177eecef79fd624f813dd53024a03cdd86ed8/third_party/WebKit/LayoutTests/paint/invalidation/reflection/scroll-absolute-layer-with-reflection-expected.txt [modify] https://crrev.com/699177eecef79fd624f813dd53024a03cdd86ed8/third_party/WebKit/LayoutTests/paint/invalidation/reflection/scroll-fixed-layer-with-reflection-expected.txt [modify] https://crrev.com/699177eecef79fd624f813dd53024a03cdd86ed8/third_party/blink/renderer/core/paint/paint_layer_painter.cc [modify] https://crrev.com/699177eecef79fd624f813dd53024a03cdd86ed8/third_party/blink/renderer/core/paint/paint_layer_painter.h
,
Apr 27 2018
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by schenney@chromium.org
, Jan 23 2018NextAction: 2018-02-05
867 bytes
867 bytes View Download