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