Bug 255114 – Wave animation on https://deploy-preview-14--unas-new-site.netlify.app/ doesn't work in Safari

• Status: NEW
• Component: Animations

[Simon Fraser (smfr)]

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.

[Radar WebKit Bug Importer]

<rdar://problem/107725408>

[Simon Fraser (smfr)]

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)
    }
}

[Simon Fraser (smfr)]

Looks like we fail to animation the <path> inside the <defs>

[Antoine Quint]

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.

[Antoine Quint]

Actually, we correctly animate the transform. This is probably something SVG-specific about updating the shadow tree rendering.

[Antoine Quint]

Created attachment 465812 [details]
Test

[Antoine Quint]

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().

[Antoine Quint]

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?