| Summary: | Wave animation on https://deploy-preview-14--unas-new-site.netlify.app/ doesn't work in Safari | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Simon Fraser (smfr) <simon.fraser> | ||||
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | dino, graouts, graouts, karlcow, koivisto, sabouhallawa, simon.fraser, una.kravets, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||
| Version: | WebKit Nightly Build | ||||||
| Hardware: | Unspecified | ||||||
| OS: | Unspecified | ||||||
| URL: | https://deploy-preview-14--unas-new-site.netlify.app/ | ||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=173154 | ||||||
| Attachments: |
|
||||||
|
Description
Simon Fraser (smfr)
2023-04-06 13:43:41 PDT
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? |