219729 2020-12-09 23:35:27 -0800 filter won't apply to child elements while they are animating 2025-08-14 18:21:20 -0700 1 1 1 Unclassified WebKit Animations Safari Technology Preview Mac (Intel) macOS 10.15 NEW InRadar P2 Normal --- 1 me webkit-unassigned agafvv dino git graouts hello webkit-bug-importer oldest_to_newest 1713444 0 415839 me 2020-12-09 23:35:27 -0800 Created attachment 415839 A demo of the bug Online Demo: https://jsbin.com/gucaweyica/1/edit?html,output (code is attached) <div style="filter: url(#filter)"> <div style="animation: ..."> </div> When a parent element has a filter, and the child element has an (active) animation, the child element will render without the filter applied. When the element stops animating, the filter will apply to the child element. 1714988 1 smoley 2020-12-15 18:13:28 -0800 Thanks for filing, I can reproduce this on Safari 13.1.3 and STP 117. 1714989 2 webkit-bug-importer 2020-12-15 18:13:40 -0800 <rdar://problem/72366401> 1732079 3 hello 2021-02-22 03:13:48 -0800 I'm also encountering with this error 2136662 4 git 2025-08-14 16:59:47 -0700 This issue still persists in Safari 18.5 and TP 225. Note that it's not all animations. For instance, if you modify the original demo to be a `background-color` animation, it will animate with the blur just fine. It seems to be specifically related to certain properties that create a new stacking context. In the demo, this is caused by animating a `transform`, but I've found that `scale`, `rotate`, `translate`, `opacity`, `filter`, and `backdrop-filter` all cause the same issue as well. Similar to the `animation`, triggering a `transition` with one of those properties will prevent the filters from applying for the duration of the transition, and setting `will-change` to one will prevent the filter from applying indefinitely — no actual animation is needed. Interestingly, actually using one of the stacking context properties mentioned does not prevent the filter from being applied, it's only when they are used in `animation:`, `transition:`, or `will-change:`. Additionally, `animation-fill-mode: forwards` prevents the filter from applying even after the animation is complete, just like the underlying `will-change`. And even when they are not visually applied, Safari's performance grinds to a halt if the filter is computationally intensive. I am not a Safari performance expert, but compositor trace items take longer, and scrolling through a page with a lot of complex SVG dilation filters will prevent even unfiltered portions of the page to fail to paint unless you wait, so it seems almost if this compute is still being done, just not displayed. --- Reporter's online demo modified to have will-change and no animations, which still prevents the blur from applying to the child: https://jsbin.com/siqizotova/edit?html,output 2136684 5 git 2025-08-14 18:21:20 -0700 Interestingly, the bug doesn't occur when animating a custom property, so adding a custom property as a proxy may be a workaround for those experiencing the issue. Reporter's online demo modified to animate a custom property in the keyframes which visually animates as the reporter intended: https://jsbin.com/tuwonegaya/1/edit?html,output 415839 2020-12-09 23:35:27 -0800 2020-12-09 23:35:27 -0800 A demo of the bug example.html text/html 817 me PCFET0NUWVBFIGh0bWw+CjxodG1sPgoJPGhlYWQ+CgkJPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+ CgkJPHN0eWxlPgoJCQlAa2V5ZnJhbWVzIHNwaW4gewoJCQkJZnJvbSB7CgkJCQkJdHJhbnNmb3Jt OiByb3RhdGUoMGRlZyk7CgkJCQl9CgkJCQl0byB7CgkJCQkJdHJhbnNmb3JtOiByb3RhdGUoMzYw ZGVnKTsKCQkJCX0KCQkJfQoKCQkJLmNpcmNsZSB7CgkJCQl3aWR0aDogMTAwcHg7CgkJCQloZWln aHQ6IDEwMHB4OwoJCQkJYm9yZGVyLXJhZGl1czogNTAlOwoJCQkJYmFja2dyb3VuZDogcHVycGxl OwoJCQkJYm9yZGVyOiAyMHB4IGRvdHRlZCByZWQ7CgkJCX0KCgkJCS5zcGluIHsKCQkJCWFuaW1h dGlvbjogc3BpbiA1cyBsaW5lYXIgMTsKCQkJfQoKCQkJLmJsdXIgewoJCQkJZmlsdGVyOiB1cmwo I3N2Zy1maWx0ZXIpOwoJCQl9CgkJPC9zdHlsZT4KCTwvaGVhZD4KCTxib2R5PgoJCTxzdmcgeG1s bnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCQkJPGZpbHRlciBpZD0ic3ZnLWZpbHRl ciIgd2lkdGg9IjMiIGhlaWdodD0iMyIgeD0iLTEiIHk9Ii0xIj4KCQkJCTxmZUdhdXNzaWFuQmx1 ciBpbj0iU291cmNlR3JhcGhpYyIgc3RkRGV2aWF0aW9uPSI1IiAvPgoJCQk8L2ZpbHRlcj4KCQk8 L3N2Zz4KCgkJPGRpdiBjbGFzcz0iYmx1ciI+CgkJCTxkaXYgY2xhc3M9ImNpcmNsZSI+PC9kaXY+ CgkJPC9kaXY+CgoJCTxkaXYgY2xhc3M9ImJsdXIiPgoJCQk8ZGl2IGNsYXNzPSJjaXJjbGUgc3Bp biI+PC9kaXY+CgkJPC9kaXY+CgoJCTxkaXYgY2xhc3M9ImNpcmNsZSBzcGluIGJsdXIiPjwvZGl2 PgoJPC9ib2R5Pgo8L2h0bWw+Cg==