RESOLVED DUPLICATE of bug 196295 202472
Drop-shadow filter repaints incorrectly when using CSS transitions
https://bugs.webkit.org/show_bug.cgi?id=202472
Summary Drop-shadow filter repaints incorrectly when using CSS transitions
Viktor Zozuliak
Reported 2019-10-02 08:56:39 PDT
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)
Attachments
unexpected shadow trail (12.79 KB, image/png)
2019-10-02 08:56 PDT, Viktor Zozuliak
no flags
simple drop-shadow repaint test (489 bytes, text/html)
2022-03-03 21:34 PST, Simon Fraser (smfr)
no flags
drop-shadow repaint with descendants (1.04 KB, text/html)
2022-03-03 21:35 PST, Simon Fraser (smfr)
no flags
drop-shadow transition (550 bytes, text/html)
2022-03-04 13:37 PST, Simon Fraser (smfr)
no flags
Radar WebKit Bug Importer
Comment 1 2019-10-02 13:17:32 PDT
Drew McMurry
Comment 2 2020-02-11 14:19:02 PST
This issue can similarly be seen here. https://codepen.io/anon/pen/gNXvQX
Antoine Quint
Comment 3 2020-11-03 01:57:20 PST
Moving to Layout and Rendering component as this seems to be a repaint issue.
Simon Fraser (smfr)
Comment 4 2022-03-03 21:30:55 PST
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.
Simon Fraser (smfr)
Comment 5 2022-03-03 21:34:53 PST
Created attachment 453810 [details] simple drop-shadow repaint test
Simon Fraser (smfr)
Comment 6 2022-03-03 21:35:19 PST
Created attachment 453811 [details] drop-shadow repaint with descendants
Simon Fraser (smfr)
Comment 7 2022-03-04 08:33:48 PST
*** Bug 207586 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 8 2022-03-04 13:37:38 PST
I'll use this bug to track the transition-specific issues with drop-shadow.
Simon Fraser (smfr)
Comment 9 2022-03-04 13:37:53 PST
Created attachment 453868 [details] drop-shadow transition
Simon Fraser (smfr)
Comment 10 2022-03-04 13:39:21 PST
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.
Simon Fraser (smfr)
Comment 11 2022-03-04 13:43:08 PST
*** Bug 236974 has been marked as a duplicate of this bug. ***
Bramus
Comment 12 2022-03-16 03:05:12 PDT
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?
kelter (badcat)
Comment 13 2022-03-16 07:22:24 PDT
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()
Carl von Buelow
Comment 14 2022-12-21 17:35:02 PST
Safari Version 16.1 (18614.2.9.1.12) Another example of this bug: https://codepen.io/cvbuelow/pen/ZEjYNEY Once the filter is applied, changes to the filter are not always reflected. Adding the translateZ(0) hack does not fix it.
Simon Fraser (smfr)
Comment 15 2025-06-05 17:23:45 PDT
*** This bug has been marked as a duplicate of bug 196295 ***
Note You need to log in before you can comment on or make changes to this bug.