Transform bug in SVG elements in Safari

[marcelgerber]

Hi 👋

We're using your awesome library at Our World in Data to animate our charts, and it's very nice to use. So, thank you for making our life a tiny little bit easier in that regard.

We're using it in what is probably not exactly a supported use case, namely animating SVG elements. And it works fine! However, we have noticed that this breaks in weird ways in Safari (Safari 14, on desktop and iOS), where the translate position applied to a element is not honored. I was able to create a small test case that works fine on Firefox and Chrome, but breaks on Safari: https://codesandbox.io/s/react-flip-toolkit-list-shuffle-example-forked-jysq0?file=/src/index.js

After shuffling, all re-ordered numbers end up in the upper left corner on Safari

I would assume that this is an issue with Safari and not with your library, but it would still be great to know if you can think of a way that we can circumvent the issue!

Thank you, Marcel from Our World in Data

[aholachek]

Hi Marcel,

Sorry for the delay in response, and thank you for providing a helpful test case. Due to my lack of in-depth knowledge surrounding svg animations, I can't say for sure what is wrong, and my efforts to debug your animation in Safari didn't yield anything conclusive. To be honest, Safari seems to be the source of many compatibility headaches, so personally, I like your linked approach of simply disabling animations for Safari.

One thing that might be interesting to try is having the library detect whether the Flipped component is wrapping an svg element, and then using the transform property in that case to implement transitions, rather than inline styles (e.g. style="transform:matrix(...)" as it currently does). I am wondering if Safari dislikes inline transform styles on g elements. I probably won't have time to make such a pr, but if you wanted to look into it I would certainly help review and integrate into the library if such an approach works.

Also, the our world in data website is super cool!

[marcelgerber]

Hi Alex,

first off, thank you very much for your helpful response.

Yeah I must admit that I also don't really grasp what's going on here, and am not very familiar with SVG animations either. I was just happy that react-flip-toolkit worked with very little work from my side (even if this is not really a supported use case, I suppose)!

To be honest, Safari seems to be the source of many compatibility headaches, so personally, I like your linked approach of simply disabling animations for Safari.

That's too bad. This fix was originally meant as a stopgap (because I, too, couldn't find a way to fix the issues in Safari), but at least the animation is not a must have for us. It can help keep track of a country when "playing back" a time series, but it looks like Safari users have to live without it then.

One thing that might be interesting to try is having the library detect whether the Flipped component is wrapping an svg element, and then using the transform property in that case to implement transitions

That's a good pointer! I'll try and see whether I can quickly see if this makes a difference.

Also, the our world in data website is super cool!

Thank you!

[marcelgerber]

Okay, I've had a look into the issue for a long time now. Here's what I could gather:

• Using the SVG transform property doesn't help at all. In fact, it makes things worse, since transform is not taken into account for getComputedStyle in Safari, only style.transform is. So we definitely need to use style.transform for this reason.
• For some reason, even when using style.transform, style.transform sometimes hasn't yet been applied/updated when getFlippedElementPositionsAfterUpdate is called. In that case, computedStyle.transform is none, which then also explains why elements are animated toward the top of the screen. I don't know the exact reason why this happens, but my guess would be that it's a race condition?

I hope this somewhat helps.