WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
Details
simple drop-shadow repaint test
(489 bytes, text/html)
2022-03-03 21:34 PST
,
Simon Fraser (smfr)
no flags
Details
drop-shadow repaint with descendants
(1.04 KB, text/html)
2022-03-03 21:35 PST
,
Simon Fraser (smfr)
no flags
Details
drop-shadow transition
(550 bytes, text/html)
2022-03-04 13:37 PST
,
Simon Fraser (smfr)
no flags
Details
Show Obsolete
(2)
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2019-10-02 13:17:32 PDT
<
rdar://problem/55921551
>
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.
Top of Page
Format For Printing
XML
Clone This Bug