1763873 - Animations in SVG content loaded from CSS properties are broken. SVG documents inactive?

Status: RESOLVED DUPLICATE of bug 1763815

(Core :: SVG, defect)

Description

[Shane Hughes [:aminomancer]]

I'm seeing some issues with SVG animations. There are similar but slightly different problems with <animate> as well as animations added by style. This problem is restricted to animations that are defined within the SVG file. And I'm only seeing this problem with SVG files that are loaded by CSS. I'll post a recording, but I think you should be able to see the problem just by clicking this link.

I can't remember the bug number, but I saw this problem like a year ago and someone else (maybe emilio?) said it has something to do with the SVG document being treated as inactive. Which would explain why the animation basically freezes or plays at a really low frame rate until you start mousing over it. Anyway, back then, I believe the problem either affected animations added by style attribute, or added by <animate> element, but didn't affect both at the same time.

But right now, at least on build 20220408094506, I'm seeing problems with both methods. The problems are slightly different though. The animations added by style attribute are playing at an extremely low framerate but they're still playing. Whereas the animations added by <animateTransform> for example will completely freeze without some kind of interaction. Here's an example of an svg for that, it's just an alternate version of the same PDF.js loading icon I linked before:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill"
    fill-opacity="context-fill-opacity">
    <path d="M7 3V1s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z" />
    <path opacity=".93"
        d="M4.63 4.1l-1-1.73S3.13 1.5 4 1c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37 1.37c-.87.57-1.37-.37-1.37-.37z" />
    <path opacity=".86"
        d="M3.1 6.37l-1.73-1S.5 4.87 1 4c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37 1.37c-.5.87-1.37.37-1.37.37z" />
    <path opacity=".79" d="M3 9H1S0 9 0 8s1-1 1-1h2s1 0 1 1-1 1-1 1z" />
    <path opacity=".72"
        d="M4.1 11.37l-1.73 1S1.5 12.87 1 12c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z" />
    <path opacity=".65"
        d="M3.63 13.56l1-1.73s.5-.87 1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z" />
    <path opacity=".58" d="M7 15v-2s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z" />
    <path opacity=".51"
        d="M10.63 14.56l-1-1.73s-.5-.87.37-1.37c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37 1.37c-.87.5-1.37-.37-1.37-.37z" />
    <path opacity=".44"
        d="M13.56 12.37l-1.73-1s-.87-.5-.37-1.37c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37 1.37c-.5.87-1.37.37-1.37.37z" />
    <path opacity=".37" d="M15 9h-2s-1 0-1-1 1-1 1-1h2s1 0 1 1-1 1-1 1z" />
    <path opacity=".3"
        d="M14.56 5.37l-1.73 1s-.87.5-1.37-.37c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z" />
    <path opacity=".23"
        d="M9.64 3.1l.98-1.66s.5-.874 1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z" />
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" dur="0.85s" repeatCount="indefinite"
        calcMode="discrete"
        values="0 0 0; 30 0 0; 60 0 0; 90 0 0; 120 0 0; 150 0 0; 180 0 0; 210 0 0; 240 0 0; 270 0 0; 300 0 0; 330 0 0" />
</svg>

Comment 1

[Shane Hughes [:aminomancer]]

Attachment: Loading the icon by list-style-image

Here you can see what happens with both cases. At the beginning of this recording, I have set the image's list-style-image property to an SVG that uses <animateTransform> for animation. As you can see, it's completely frozen until I do something with the mouse (maybe also keyboard, I wasn't paying super close attention). Then midway through I change it to an SVG that uses the style attribute to play basically the same stepwise animation. At that point, it doesn't freeze anymore but just plays at a very slow framerate.

Comment 2

[Robert Longson [:longsonr]]

bug 1763815 indicates a recently introduced problem with animations and it certainly seems similar in description. That one is caused by bug 1763643 so maybe you're seeing the same issue with the same cause.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: loading-dark.svg (adjusted to use blue instead of white)

For reference/convenience, here's a version of the current file at https://searchfox.org/mozilla-central/source/toolkit/components/pdfjs/content/web/images/loading-dark.svg (which I've adjusted to use a blue fill-color instead of white, so that it's visible when viewed over a light or dark backgrounds)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (using attached SVG in an <img>)

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Robert Longson [:longsonr] from comment #2)

bug 1763815 indicates a recently introduced problem with animations and it certainly seems similar in description. That one is caused by bug 1763643 so maybe you're seeing the same issue with the same cause.

Yeah, this goes away if I toggle the about:config pref that's referenced in that bug, so I think this is the same root issue. --> Marking as a duplicate.