Animations duplicate on Safari browser about metismenu HOT 7 CLOSED

@rderharo
Which metisMenu version did you test?

from metismenu.

I'm currently using v1.1.1.

from metismenu.

@rderharo
Can you test this version. https://github.com/onokumus/metisMenu/tree/2.0.0

from metismenu.

Can confirm the same thing happens in 2.0.0.

from metismenu.

I tried looking more into this and still cannot find a solution. If I go to your demo page with Safari, it works fine. But on my app, it doubles the expanding animation.

One additional thing I noticed is that the collapsing animation is skipped. It just hides with no animation at all.

It's an AngularJS app, which is the only thing I can think of that would be unique versus the demo. I updated the bootstrap and metisMenu libraries to the latest versions with no effect.

from metismenu.

I fixed the problem.
For me the cause was my custom css on the submenu unordered list tag:
ul.submenu { transition: all 0.2s ease-in; }
It added a redundant transition, which doubled the plugin's one.

from metismenu.

Hmm. I do not have any transitions on anything else on my app, but I will dig deeper into the other libraries that I use to see if there is a conflict.

Having said that, why would it only impact Safari and no other browser?

Edit: This also raises the point (again) that a library like this one that is intended to be used among other libraries should have all its classes prefixed to avoid issues like this.

from metismenu.