Bug 229492

Summary: Applying CSS animation to child elements breaks CSS filter applied to parent
Product: WebKit Reporter: CJ Gammon <gammon>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, dino, graouts, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Mac (Intel)   
OS: macOS 11   
See Also: https://bugs.webkit.org/show_bug.cgi?id=144012
https://bugs.webkit.org/show_bug.cgi?id=213172
Attachments:
Description Flags
Three circles inside a parent with filter applied. One circle has css animation applied. none

Description CJ Gammon 2021-08-25 04:50:10 PDT 
Created attachment 436383 [details]
Three circles inside a parent with filter applied.  One circle has css animation applied.

When using CSS animations to animate a child element it breaks a `filter: url(#)` applied to the parent container.  This seems to be because it forces each child to have a new render layer.

Result: The filter is no longer applied.
Expected: The filter remains applied to the parent.


See example here:
https://codepen.io/cjgammon/pen/abwzdEX

Could be related to Issue #144012: https://bugs.webkit.org/show_bug.cgi?id=144012
Comment 1 Simon Fraser (smfr) 2021-08-25 10:11:59 PDT 
Confirmed. You're right that this is similar to bug 144012.
Comment 2 Radar WebKit Bug Importer 2021-08-25 10:12:18 PDT 
<rdar://problem/82345483>