NEW229492
Applying CSS animation to child elements breaks CSS filter applied to parent 
https://bugs.webkit.org/show_bug.cgi?id=229492
Summary Applying CSS animation to child elements breaks CSS filter applied to parent
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>
Ahmad Saleem
Comment 3 2026-01-31 17:53:22 PST
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
Simon Fraser (smfr)
Comment 4 2026-02-02 08:43:28 PST
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.
Note You need to log in before you can comment on or make changes to this bug.