Bug 229492 - Applying CSS animation to child elements breaks CSS filter applied to parent
Summary: Applying CSS animation to child elements breaks CSS filter applied to parent
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-08-25 04:50 PDT by CJ Gammon
Modified: 2021-08-25 10:14 PDT (History)
6 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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>