Load https://deploy-preview-14--unas-new-site.netlify.app/ in Firefox and note the nice wave animation on the lower edge of the header. Now load in Safari; the wave animation is not there.
<rdar://problem/107725408>
The animation is driven by: .wave:where(.astro-J7PV25F6) { display:block; width:100%; height:clamp(2rem, 5vw, 10rem); margin:0; z-index:0; bottom:0 } #page-divide:where(.astro-J7PV25F6) { animation:moveforward 10s linear infinite } @keyframes moveforward { 0% { transform:translate(-90px) } to { transform:translate(85px) } }
Looks like we fail to animation the <path> inside the <defs>
Presumably a <path> within a <defs> does not have a renderer, and I guess we bail out of the accelerated animation code which does not account for this possibility.
Actually, we correctly animate the transform. This is probably something SVG-specific about updating the shadow tree rendering.
Created attachment 465812 [details] Test
I think we need to call a method on SVGElement to notify that the style changed due to an animation which would then call invalidateInstances().
I wonder if we should add a new virtual method to StyledElement to notify when the animated style changed which would allow SVGElement to override. We could then call this method at the end of Style::TreeResolver::createAnimatedElementUpdate(), or somewhere else?