Transition-group in a SVG on Firefox not working properly

[santicros]

Version

3.0.0-rc.11

Firefox 80.0.1

MacOS Catalina 10.15.6

Reproduction link

https://jsfiddle.net/z14bj8kv/42/

Steps to reproduce

When creating a SVG simulating a Chart, where a button adds a new object to a reactive array, in a ul list everything animates correctly. When doing so inside a SVG, it works fine at Chrome, but at Firefox it doesn't work properly.

What is expected?

When clicking the button Add values on Firefox, it will add a new item to the graph and list smoothly, also on deletion.

What is actually happening?

When adding a new value, on the list everything is smooth but on the SVG it doesn't transition when creating items, but it does on deletion.

---

Might it be problem with the Vue reactive? I tried to add a console.log() of dataset after adding and deleting, and then opening the console and it was animating smoothly. If I closed the console of Firefox it didn't.

Also was having this problem with Vite, then created the JSFiddle.

[danimajo]

Tried this in recent Firefox (95) on Win10 - looks like the fade-in transition works sometimes, fade-out always.

[gorankarlic]

Issue where TransitionGroup transitions (with appear) inside a SVG are not working properly seems to be still there with Firefox 117.0 (64-bit) on arm64 MacOS.

[edison1105]

The issue can no longer be reproduced using the latest version of Vue and Firefox 131.0.3(64-bit) on MacOS. see https://jsfiddle.net/v4tsr2q6/