Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVGs with animateTransform lag for an extremely long time when embedded #11681

Closed
justingolden21 opened this issue May 18, 2024 · 7 comments
Closed

SVGs with animateTransform lag for an extremely long time when embedded #11681

justingolden21 opened this issue May 18, 2024 · 7 comments

Comments

@justingolden21
Copy link

Describe the bug

SVG elements inline inside svelte files with will lag a lot before starting. Reproduced locally in dev, with build and in production website, on win10 and linux

Reproduction

https://svelte.dev/repl/a58a0871b908479fb265ea7e10b17f84?version=4.2.17

<script>
	let name = 'world';
</script>


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
	<path d="m8 16v-16" fill="none" stroke="#EAB308">
		<animateTransform
			attributeName="transform"
			type="rotate"
			from="0 8 8"
			to="360 8 8"
			dur="12s"
			repeatCount="indefinite" />
	</path>
</svg>

<h1>Hello {name}!</h1>

Logs

N/A

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700K @ 3.60GHz
    Memory: 18.53 GB / 31.87 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.4355

Severity

annoyance
@justingolden21
Copy link
Author

justingolden21 commented May 18, 2024 •
edited

If I link to a static SVG file, then it works fine:

<img src="line.svg" alt="">

But when it's inline, then it doesn't work.

I marked this as "annoyance" instead of anything higher because it's not applicable to that many, but for me this is huge since it blocks me from releasing an update where I would have a dynamic animated SVG background. I can't have dynamic data in a static SVG, so I need it embedded in HTML / inside Svelte.

I also noticed this happens in chromium browsers (chrome, edge, and brave) but not in firefox, and noticed this both in windows 10 and in linux

@justingolden21
Copy link
Author

I should note I'm using svelte 4 and so is the repl.

@Prinzhorn
Copy link
Contributor

This is very unlikely a Svelte issue, how could it? The markup is there, you can see it in dev tools. This screams Chromium bug (the "lag" appears to be one "duration" cycle that just isn't animated). I'm sure you'll find something in the Chromium issue tracker. First result I found was https://issues.chromium.org/issues/40699044

@justingolden21
Copy link
Author

Thanks for the reply!

I would generally agree, but when I take a vanilla HTML file with a SVG embedded, then it works fine in chromium:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    Hello World
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path d="m8 16v-16" fill="none" stroke="#EAB308">
            <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 8 8"
                to="360 8 8"
                dur="12s"
                repeatCount="indefinite" />
        </path>
    </svg>
</body>
</html>

There is zero lag at all in the animation no matter how many times I refresh.

Do you think it's a chromium+HMR thing?

Also, what did you search to find that issue in the Chromium issue tracker?

Thanks again for the reply.

@Prinzhorn
Copy link
Contributor

Prinzhorn commented May 19, 2024 •
edited

but when I take a vanilla HTML file with a SVG embedded, then it works fine in chromium

This is something entirely different. Svelte uses DOM methods to create a structure that matches what you've described with an HTML-like Syntax in a *.svelte file.

Check out the two Fiddles linked in the Chromium tracker. The first one is broken to this day. It does this:

var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg');
var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
circle.setAttribute("cx", "10");
circle.setAttribute("cy", "10");
circle.setAttribute("r", "10");
circle.setAttribute("fill", "blue");
var ani = document.createElementNS("http://www.w3.org/2000/svg","animateTransform");
ani.setAttribute("attributeName", "transform");
ani.setAttribute("attributeType", "xml");
ani.setAttribute("type", "translate" );
ani.setAttribute("from", "10");
ani.setAttribute("to", "100");
ani.setAttribute("begin", "0s");
ani.setAttribute("dur", "2s");
ani.setAttribute("fill", "freeze");
circle.appendChild(ani);
svgnode.appendChild(circle);
document.getElementById('mydiv').appendChild(svgnode);

which more closely resembles what Svelte does.

But as the Chromium issue shows, this is only a problem when it happens after the page has loaded. Which might be unavoidable with Svelte, because the rendering might happen a tick later. But I'm not sure about that, are you initializing your Svelte app synchronously right in a <script> or only on dom-ready?

Also, what did you search to find that issue in the Chromium issue tracker?

animateTransform dynamic

@Prinzhorn
Copy link
Contributor

Save this as vanilla HTML and see the same lag:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
  <script>
    setTimeout(() => {
      document.body.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path d="m8 16v-16" fill="none" stroke="#EAB308">
            <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 8 8"
                to="360 8 8"
                dur="12s"
                repeatCount="indefinite" />
        </path>
    </svg>`
    }, 100);
  </script>
</body>
</html>

@justingolden21
Copy link
Author

Ah I see, you're right.

Thanks for the replies and for the example. I'll mark this ticket as closed.

Hopefully chromium figures it out. Makes the update I wanted to publish unusable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Prinzhorn @justingolden21