Animated Svg + Cross Browser Compatibility

I'm having trouble with an animated SVG I created using http://lazylinepainter.info/ On Chrome it works perfectly. However on Safari, Firefox and iOS the animation shows the end p

Solution 1:

This seems to be a bug in FF (IMO anyway). It should not be drawing the line endcaps if the line ends exactly at a dash endpoint.

One quick fix is to change your stroke-caps to "butt".

'strokeCap': 'butt',

This works on Firefox at least. I can't test whether this works on Safari.

If you want to keep the round caps, then a workaround is to make sure that the lines don't start and end exactly on a dasharray endpoint. Change these two lines in the paint() function.

path.style.strokeDasharray = length + ' ' + (length+2);path.style.strokeDashoffset = (length+1);

http://jsfiddle.net/aqn6zkf4/3/