Bug 253259

Summary:

[svg] text transformation not starting on initial render

Product:

WebKit

Reporter:

Lloyd <lloyd.d.richards>

Component:

SVG

Assignee:

Antoine Quint <graouts>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

graouts, mmaxfield, sabouhallawa, webkit-bug-importer, zimmermann

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Reduction	none

Description Lloyd 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

Comment 1 Antoine Quint 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?

Comment 2 Lloyd 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

Comment 3 Antoine Quint 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.

Comment 4 Antoine Quint 2023-03-06 05:29:31 PST

RenderSVGText::paint() is never called with the correct m_localTransform value.

Comment 5 Antoine Quint 2023-03-06 06:41:42 PST

I believe there needs to be custom logic to call RenderSVGText::setNeedsTransformUpdate() here when the style changes.

Comment 6 Antoine Quint 2023-03-06 07:17:09 PST

Pull request: https://github.com/WebKit/WebKit/pull/11109

Comment 7 EWS 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.

Comment 8 Radar WebKit Bug Importer 2023-03-08 23:13:17 PST

<rdar://problem/106485848>