[IE10 IE11] image clip with polygon AND mouseover mouseout interaction

[Rémi Tran]

• i have an image clip with a polygon;
• on mouseEnter of the image, i change the plot of the polygon with an animate method;
• on mouseLeave of the image, i set the original plot back with an animate method.

The bug is only on IE10 and IE11, when then animation start, a mouseLeave is triggered directly.
If i don't use animate it's working "fine", but there's no animation.
If i don't clip an image, it's also working fine.

It's working fine on IE9, lastest Safari, Firefox and Chrome.

I got first the same issue with the following library : https://github.com/wout/svg.js

 var paper = Snap(currentWidth, currentHeight).appendTo(myDocument));

 var img = paper.image($model.path+'assets/images/ui/right_layer.png');

 var circle = paper.circle(300, 300, 100).attr({
    fill: '#fff'
 });;

 var masked = img.attr({
    clipPath: circle
 });  

 img.mouseover(function(){
      circle.animate({r: 50}, 1000);
 })

 img.mouseout(function(){
     circle.animate({r: 100}, 1000);
 })

[Rémi Tran]

I did a work around that consist in duplicate a clone of the polygon that i use to clip the image and put it on the top, and i bind event on this clone, then animate the clone polygon, the underlay clipped image, and clipper polygon.
Still, if someone has explanation, fix, i am all ears.