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

CJ Gammon
Reported 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
Attachments
Three circles inside a parent with filter applied. One circle has css animation applied. (1.59 KB, text/html)
2021-08-25 04:50 PDT, CJ Gammon 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2021-08-25 10:11:59 PDT
Confirmed. You're right that this is similar to bug 144012.
Radar WebKit Bug Importer
Comment 2 2021-08-25 10:12:18 PDT
<rdar://problem/82345483>
Note You need to log in before you can comment on or make changes to this bug.