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? |