Bug 253259

Summary: [svg] text transformation not starting on initial render
Product: WebKit Reporter: Lloyd <lloyd.d.richards>
Component: SVGAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: graouts, mmaxfield, sabouhallawa, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Reduction none

Lloyd
Reported 2023-03-02 11:08:43 PST
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
Attachments
Reduction (370 bytes, text/html)
2023-03-06 00:27 PST, Antoine Quint 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Antoine Quint
Comment 1 2023-03-06 00:09:09 PST
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?
Lloyd
Comment 2 2023-03-06 00:25:14 PST
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
Antoine Quint
Comment 3 2023-03-06 00:27:39 PST
Created attachment 465311 [details] Reduction Reduced it to a simple text that sets a <text> transform in a requestAnimationFrame callback.
Antoine Quint
Comment 4 2023-03-06 05:29:31 PST
RenderSVGText::paint() is never called with the correct m_localTransform value.
Antoine Quint
Comment 5 2023-03-06 06:41:42 PST
I believe there needs to be custom logic to call RenderSVGText::setNeedsTransformUpdate() here when the style changes.
Antoine Quint
Comment 6 2023-03-06 07:17:09 PST
Pull request: https://github.com/WebKit/WebKit/pull/11109
EWS
Comment 7 2023-03-08 23:12:51 PST
Committed 261408@main (1fe8f8ec3996): <https://commits.webkit.org/261408@main> Reviewed commits have been landed. Closing PR #11109 and removing active labels.
Radar WebKit Bug Importer
Comment 8 2023-03-08 23:13:17 PST
<rdar://problem/106485848>
Note You need to log in before you can comment on or make changes to this bug.