Created attachment 380028 [details] unexpected shadow trail Safari 13.0.1 Given element with: - box-shadow filter - transition of CSS property which changes position (e.g. margin-left) Steps to reproduce: - change element's CSS property to which transition is applied Result: - observe trail left by element's shadow during transition (look at screenshot attached) Expected: - no shadow trail Reproduction: - https://jsfiddle.net/vnqpx2rL/1/ Workaround: - apply "transform: translateZ(0)" CSS to element (hacky, non obvious)
<rdar://problem/55921551>
This issue can similarly be seen here. https://codepen.io/anon/pen/gNXvQX
Moving to Layout and Rendering component as this seems to be a repaint issue.
The issue here is that we don't take drop-shadow into account as visual overflow (like we do, say, for box-shadow). That would be easy to do for a single element, but drop-shadow is more complex, because it contributes visual overflow to all the descendant boxes as well. This more like how outlines need to impact repaint for descendants.
Created attachment 453810 [details] simple drop-shadow repaint test
Created attachment 453811 [details] drop-shadow repaint with descendants
*** Bug 207586 has been marked as a duplicate of this bug. ***
I'll use this bug to track the transition-specific issues with drop-shadow.
Created attachment 453868 [details] drop-shadow transition
Two issues that I see: 1. After a drop-shadow transition, the element remains composited forever. 2. We seem to be confused about CA rendering the drop-shadow vs. painting it; at the end of the transition, a layout update rejiggers the composited layer such that the drop-shadow paints inside it.
*** Bug 236974 has been marked as a duplicate of this bug. ***
Got a similar report on my blog, pointing to https://codepen.io/badcat/pen/LYzzWvy as a demo. Adding the translateZ(0) hack fixes it. The user submitted the issue via Feedback Assistant, with id FB9819385. Perhaps these cases could be linked?
Fwiw, in the instance of my this only appears to happen on hover and when the viewport area (of parent element) is less than the dropshadow. https://codepen.io/badcat/pen/LYzzWvy In the MDN example, the failed dropshadow occurs within an iframe. https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()