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.

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

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.