229492 2021-08-25 04:50:10 -0700 Applying CSS animation to child elements breaks CSS filter applied to parent 2026-02-02 08:43:28 -0800 1 1 1 Unclassified WebKit Animations Safari 14 Mac (Intel) macOS 11 NEW https://bugs.webkit.org/show_bug.cgi?id=144012 https://bugs.webkit.org/show_bug.cgi?id=213172 InRadar P2 Normal --- 1 gammon webkit-unassigned ahmad.saleem792 bfulgham dino graouts simon.fraser webkit-bug-importer zalan oldest_to_newest 1787140 0 436383 gammon 2021-08-25 04:50:10 -0700 Created attachment 436383 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 1787199 1 simon.fraser 2021-08-25 10:11:59 -0700 Confirmed. You're right that this is similar to bug 144012. 1787200 2 webkit-bug-importer 2021-08-25 10:12:18 -0700 <rdar://problem/82345483> 2176943 3 ahmad.saleem792 2026-01-31 17:53:22 -0800 bool RenderLayerCompositor::requiresCompositingLayer(const RenderLayer& layer, RequiresCompositingData& queryData) const { auto& renderer = rendererForCompositingTests(layer); if (!renderer.layer()) { ASSERT_NOT_REACHED(); return false; } auto hasAncestorWithReferenceFilter = [&]() -> bool { for (auto* ancestor = layer.parent(); ancestor; ancestor = ancestor->parent()) { auto& ancestorRenderer = ancestor->renderer(); if (!ancestorRenderer.hasFilter()) continue; if (ancestorRenderer.style().filter().hasReferenceFilter()) return true; } return false; }; bool intrinsic = requiresCompositingForTransform(renderer) || requiresCompositingForAnimation(renderer) || requiresCompositingForPosition(renderer, *renderer.layer(), queryData) || requiresCompositingForCanvas(renderer) || requiresCompositingForFilters(renderer) || requiresCompositingForWillChange(renderer) || requiresCompositingForBackfaceVisibility(renderer) || requiresCompositingForViewTransition(renderer) || requiresCompositingForVideo(renderer) || requiresCompositingForModel(renderer) || requiresCompositingForFrame(renderer, queryData) || requiresCompositingForPlugin(renderer, queryData) || requiresCompositingForOverflowScrolling(*renderer.layer(), queryData) || requiresCompositingForAnchorPositioning(*renderer.layer()); if (!intrinsic) return false; // Prevent isolated compositing when an ancestor owns an SVG reference filter. if (hasAncestorWithReferenceFilter()) return false; queryData.intrinsic = true; return true; } This fixes it but breaks `-webkit-box-reflect` case here - https://codepen.io/cobra_winfrey/pen/JjOvxYG 2177164 4 simon.fraser 2026-02-02 08:43:28 -0800 That's not the right fix. What we need to do here is to paint the SVG filter in compositing layers when possible, rather than just dropping them the floor. 436383 2021-08-25 04:50:10 -0700 2021-08-25 04:50:10 -0700 Three circles inside a parent with filter applied. One circle has css animation applied. test.html text/html 1625 gammon PGh0bWw+CiAgICA8aGVhZD4KICAgICAgICA8c3R5bGU+CmJvZHl7CiAgaGVpZ2h0OiAxMDB2aDsK fQoKI2ZpbHRlcnN7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGxlZnQ6IC0xMDAwcHg7Cn0KCiNn b297CiAgZmlsdGVyOiB1cmwoI2dvb2lmeSk7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVaKDApOwog IHdpZHRoOiAxMDAlOwogIGhlaWdodDogMTAwJTsKfQoKLmNpcmNsZTpudGgtY2hpbGQoMSkgewog IGFuaW1hdGlvbjogbW92ZUEgMTBzOwp9CgpAa2V5ZnJhbWVzIG1vdmVBIHsKICAgIDAlIHsKICAg ICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoODAsIDIzMHB4KTsKICAgIH0KICAgIAogICAgMTUlIHsK ICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMjIwcHgsIDI2MHB4KTsKICAgIH0KICAgIDMwJSB7 CiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKDEzMHB4LCAtMTcwcHgpOwogICAgfQogICAgNDAl IHsKICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTE2MHB4LCAtMTcwcHgpOwogICAgfQogICAg NjAlIHsKICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMTcwcHgsIC0xNjBweCk7CiAgICB9CiAg ICA4MCUgewogICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtMTcwcHgsIC0xNTBweCk7CiAgICB9 CiAgICAKICAgIDEwMCUgewogICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtMjEwcHgsIDIyMHB4 KTsKICAgIH0KICB9CgogICAgICAgIDwvc3R5bGU+CiAgICA8L2hlYWQ+CiAgICA8Ym9keT4KPHN2 ZyBpZD0iZmlsdGVycyI+CiAgICA8ZGVmcz4KPGZpbHRlciBpZD0iZ29vaWZ5IiB3aWR0aD0iNDAw JSIgeD0iLTE1MCUiIGhlaWdodD0iNDAwJSIgeT0iLTE1MCUiPgogICAgPGZlR2F1c3NpYW5CbHVy IGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjIwIiByZXN1bHQ9ImJsdXIiIC8+CiAg ICA8ZmVDb2xvck1hdHJpeCBpbj0iYmx1ciIgbW9kZT0ibWF0cml4IiB2YWx1ZXM9IjEgMCAwIDAg MAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAwIDEg MCAwIDAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg MCAwIDEgMCAwCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg ICAgIDAgMCAwIDI1NSAtMTUzIiAvPgo8L2ZpbHRlcj4KICAgIDwvZGVmcz4KPC9zdmc+CgoKPGRp diBpZD0iZ29vIj4KICA8c3ZnIGNsYXNzPSJjaXJjbGUiIHdpZHRoPSIxODAiIGhlaWdodD0iMTgw IiBkYXRhLXg9IjAiIGRhdGEteT0iMCI+CiAgICAgPGNpcmNsZSBjeD0iOTAiIGN5PSI5MCIgcj0i OTAiIGZpbGw9InJlZCIgLz4KICA8L3N2Zz4KICA8c3ZnIGNsYXNzPSJjaXJjbGUiIHdpZHRoPSIx ODAiIGhlaWdodD0iMTgwIiBkYXRhLXg9IjAiIGRhdGEteT0iMCI+CiAgICAgPGNpcmNsZSBjeD0i OTAiIGN5PSI5MCIgcj0iOTAiZmlsbD0iYmx1ZSIgLz4KICA8L3N2Zz4KICA8c3ZnIGNsYXNzPSJj aXJjbGUiIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiBkYXRhLXg9IjAiIGRhdGEteT0iMCI+CiAg ICAgPGNpcmNsZSBjeD0iOTAiIGN5PSI5MCIgcj0iOTAiIGZpbGw9Im9yYW5nZSIgLz4KICA8L3N2 Zz4KPC9kaXY+CiAgICA8L2JvZHk+CjwvaHRtbD4=