1787793 - SVG feTurbulence filter will not animateTransform rotate

Status: RESOLVED WORKSFORME

(Core :: SVG, defect)

Description

[astilen]

Attachment: TurbulenceRotation.svg

Steps to reproduce:

This code is saved in a .SVG file and it animates as intended on most PC desktop browsers, but not on Firefox.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100">
<filter id="THE_FILTER" x="0" y="0" width="10" height="100">
<feTurbulence id="turbulence" baseFrequency="10" numOctaves="5"/>
</filter>
<rect x="0" y="0" width="1" height="1" style="filter: url(#THE_FILTER);">
<animateTransform attributeName="transform" type="rotate" from="360" to="340" dur="5s" repeatCount="indefinite"/>
</rect>
</svg>

Actual results:

The feTurbulence filter and the rotation animation both work separately on any other shapes, but when combined the entire svg breaks and shows nothing or remains frozen.
A science research webpage which relies on this specific filter to rotate with multiple of these SVGs, will freeze the entire webpage and the user has to quit, with no possibility to receive instructions.
(The website is not public and I am not allowed to disclose it, but this specific animation helps with a technical aspect of science research.)

Expected results:

My users get the .svg file by any means, then they open it on whatever browser they have without visiting a website, and sometimes offline. This is part of the reason why this problem must not be circumvented using scripts and so on.

If the users use Chrome, Opera, Brave or Edge, they open the file and the animation works.
If they use Firefox, the animation is expected to work just as well, or at least not freeze the entire page and all its contents.

Comment 1

[astilen]

Here is a codepen:

https://codepen.io/Astilen/pen/bGvPZJd

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Robert Longson [:longsonr]]

The whole page does not freeze for me but the element isn't rendered.

Comment 4

[astilen]

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

The whole page does not freeze for me but the element isn't rendered.

Yes indeed, however, I have a page with 15+ instances of this animation on different VSGs, and that's were the page locks down and needs to be closed.

Comment 5

[Robert Longson [:longsonr]]

The more octaves the worse the performance. Also your filter is height="100" and that's the whole height of the screen given your viewBox. Then you use lots of them so that's a lot of processing and when you animate them all you're just doing more work per second than your computer can handle.

Comment 6

[astilen]

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

The more octaves the worse the performance. Also your filter is height="100" and that's the whole height of the screen given your viewBox. Then you use lots of them so that's a lot of processing and when you animate them all you're just doing more work per second than your computer can handle.

Yes you are of course correct, but this filter will not rotate on ANY shape and size, it is unfortunate that my example has these unintuitive dimensions, but its NOT the source of the problem.

Actually, the animations in my science project are a few orders of magnitude higher in complexity than this SVG, using even more ridiculous sizes and layers and animations, BUT EVEN SO, the GPU usage on a 4 generations old 300 USD graphics card from 2017 (gtx 1060) remains between 30% to 70% on the 4 browsers mentioned above.

So performance is not a concern and the Firefox team should not waste too much time looking for optimizations, simply make the feTurbulence filter rotatable at any performance requirement, and my team would honestly be eternally grateful :D

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:TYLin, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 8

[astilen]

I have worked around the problem.
I can now rotate the FeTurbulence filter on Firefox simply by separating the rect from the animation, and enclosing them in a <g> tag.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100" width="800px" height="800px"> 
  <defs>
    <filter id="THE_FILTER" x="0" y="0" width="10" height="100">
        <feTurbulence id="turbulence" type="turbulence" baseFrequency="10" numOctaves="5"/>
    </filter>
  </defs>
  <g>
    <rect x="0" y="0" width="1" height="1" style="filter: url(#THE_FILTER);"> </rect>
    <animateTransform attributeName="transform" type="rotate" from="360" to="340" dur="5s" repeatCount="indefinite"/>
  </g>
</svg>

This works with 100% precision and good performance on all desktop browsers.
I will now change the code of my project to use this code structure,
but I still think it is very important that SVG animations are fully supported on Firefox regardless of how the code is structured.

Comment 9

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

Given there's a workaround in comment 8. Assign Severity S3 for now.

Comment 10

[Robert Longson [:longsonr]]

Original testcase seems OK now.