Zooming in/out with animate on QUICKLY hover with snap.svg IE and EDGE web-browser

Question

I cannot understund, why IE and EDGE has strange behavior. If you rapidly move the mouse over and out of pentagram -- animation is distancing, but in other NORMAL web-browsers all in order. http://jsfiddle.net/b1Lhjo4k/

var svgElement = Snap("#svg");
var pent = svgElement.select('#pentagram-one');
var hoverover = function() {
    pent.stop().animate({transform: 'r180,500,515'}, 400);
};
var hoverout  = function() {
    pent.stop().animate({transform: 'r0,500,515'}, 400);
};
pent.hover(hoverover, hoverout);

---

Solved by prototype function; ie and edge works now correctly.

Answer 1

I don't have Edge to test, but I suspect its because its doing something funky with Matrix/transform interpolation when starting an animation before the previous one has finished (this may be wrong, but just what initial thoughts would be to look at), or it could be something odd with very small number strings sometime as I've seen those before with IE.

One way around this, would be to not let Snap do the interpolation using the browsers matrix values, but control it yourself. You could try a small plugin for it, if you will use it a lot, something like this...

Snap.plugin( function( Snap, Element, Paper, global ) {

    Element.prototype.animRotate = function( from, to, dur ) {
       var el = this;
       this.stop();
       Snap.animate(from, to, function( val ) {
           el.transform('r' + val + ',500,515')
       },dur)
       return this;
    };
});

var pent = svgElement.select('#pentagram-one');

var hoverover = function() {
    this.animRotate(0, 180, 400)    
};
var hoverout  = function() {
    this.animRotate(180, 0, 400)
};

jsfiddle