When building animations using Framer Motion to move text around within an SVG element, the animations work correctly in Chrome and firefox but do not start in Safari unless rerendered. I have posted about this in Framer Motion (https://github.com/framer/motion/issues/1990#issuecomment-1451951933) but the core of the issue seems to be with webkit. Below is an example that works in Chrome but not in Safari: https://codesandbox.io/s/motion-text-bug-on-safari-xp6hu7
Hello Lloyd. Thanks for filing this bug. Since this uses a JavaScript framework, it's not obvious to me how the animated effect is applied to the SVG <text> element here. Quick inspection (querying document.getAnimations() while the animation should be running) makes it appear to not rely on CSS Animations, CSS Transitions or the Web Animations API. I also don't see an SVG animation element of any kind. I expect it is a JavaScript-based animation using requestAnimationFrame(). Is there any chance you could reduce this further to not include any JS framework with just vanilla HTML, CSS and JavaScript?
When discussing this with Framer Motion (the JS framework) they gave the following example showing that just the transform in the style prop of the text element was also not working: https://9084rl.csb.app/ Hope that helps
Created attachment 465311 [details] Reduction Reduced it to a simple text that sets a <text> transform in a requestAnimationFrame callback.
RenderSVGText::paint() is never called with the correct m_localTransform value.
I believe there needs to be custom logic to call RenderSVGText::setNeedsTransformUpdate() here when the style changes.
Pull request: https://github.com/WebKit/WebKit/pull/11109
Committed 261408@main (1fe8f8ec3996): <https://commits.webkit.org/261408@main> Reviewed commits have been landed. Closing PR #11109 and removing active labels.
<rdar://problem/106485848>