Animation Triggers Twice upon Mounting in Safari and Ionic App about vue-ellipse-progress HOT 3 CLOSED

My findings so far:

• MacOS 13, Firefox/Chrome/edge - works without any issue, tested on https://saucelabs.com/
• MacOS 13, Safari 16 - animation triggered twice
• IPhone 12, Safari/Edge - animation triggered twice
• reactjs/react-transition-group#631

So the old good Safari Browser (and probably older Apple systems) trigger the transition right after the initial animation. Removing the transition would fixe the issue, but dropping a smooth user experience just because of one buggy browser isn't an option. Applying animation-fill-mode: forwards would also fix the problem, but disable the transition. The solution could be to disable transition while playing the animation.

from vue-ellipse-progress.

Hallo, @jon-pruessmeier thanks for the detailed issue explanation, appreciate that!

I confirm the bug, also in Edge browser on IOS. It's very likely that this is caused by the Safari browser (and Apple's systems in general). I've had to fight with it several times. CSS implementation on IOS/MacOS even in Chrome may differ a lot.

I'll try to investigate the issue as soon as possible. Sadly i have no Apple device where i can debug, so your assistance is also much appreciated. Until then i only can suggest you to disable the animation, you can play with the settings here: https://setaman.github.io/vue-ellipse-progress-docs/guide/options/animation.html

from vue-ellipse-progress.

This issue has been automatically marked as stale and will be closed because it has not had recent activity.

from vue-ellipse-progress.