Bug 202472 – Drop-shadow filter repaints incorrectly when using CSS transitions

• Component: Animations
• Status: RESOLVED DUPLICATE

[Viktor Zozuliak]

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)

[Radar WebKit Bug Importer]

<rdar://problem/55921551>

[Drew McMurry]

This issue can similarly be seen here.

https://codepen.io/anon/pen/gNXvQX

[Antoine Quint]

Moving to Layout and Rendering component as this seems to be a repaint issue.

[Simon Fraser (smfr)]

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)]

Created attachment 453810 [details]
simple drop-shadow repaint test

[Simon Fraser (smfr)]

Created attachment 453811 [details]
drop-shadow repaint with descendants

[Simon Fraser (smfr)]

*** Bug 207586 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

I'll use this bug to track the transition-specific issues with drop-shadow.

[Simon Fraser (smfr)]

Created attachment 453868 [details]
drop-shadow transition

[Simon Fraser (smfr)]

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)]

*** Bug 236974 has been marked as a duplicate of this bug. ***

[Bramus]

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)]

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]

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)]

*** This bug has been marked as a duplicate of bug 196295 ***