jQuery / CSS Animation - Pausa no FF e Chrome pula de volta e começa não está correto - javascript, jquery, css, svg, tweenmax

No IE e no Safari, a pausa e retomada doa barra de progresso que se move funciona muito bem, no entanto, no firefox e no cromo quando você clica em pausar, ela não pausa no momento correto, mas parece pular para trás e depois para e também quando você inicia a animação inicialmente ela não começa do topo, mas um pouco à frente de si mesmo.

Estou realmente ansioso para consertar isso, mas não consigo resolver isso, seria ótimo se alguém pudesse me ajudar em uma solução.

Para iniciá-lo, clique no grande círculo PINK

FIDDLE: http://jsfiddle.net/uj4e5cw0/5/ - você verá o que quero dizer quando começar a brincar com ele.

JS:

var playing = false;

$(document).ready(function () {

var animation = new TimelineMax();
var svgPaths = $("#ring");

for (var x = 0; x < svgPaths.length; x++) {
var path = svgPaths[x];
var pathDimensions = path.getTotalLength();
var strokeWidth = path.getAttribute("stroke-width");
path.style.strokeDasharray = (pathDimensions) + " " + (pathDimensions);
path.style.strokeDashoffset = (/MSIE (d+.d+);/.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
//path.style.strokeDashoffset = (/Firefox/i.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
animation.add(TweenMax.to(path.style, 20, {
strokeDashoffset: 0, onUpdate: function () {
var n = document.createTextNode(" ");
document.body.appendChild(n);
document.body.removeChild(n);
}
}), (x > 0) ? "-=0.8" : "");
}

$(document).on("click","#pause", function(e) {
$(svgPaths).attr("class", "paused");
animation.pause();
});

$(document).on("click", "#resume", function (e) {
$(svgPaths).attr("class", "active");
animation.resume();
});

$(document).on("click", "#restart", function (e) {
//$(svgPaths).attr("class", "");
//$(svgPaths).attr("class", "active");
animation.restart();
});

$(document).on("click", "#loader", function (e) {

if (!playing) {
$("svg path").attr("class", "active");
/* $("#circle").attr("class", "active"); */
$("svg path#back").attr("stroke", "#034870");
$("svg path#back").attr("fill", "#FFFFFF");
$("svg path#ring").attr("stroke", "#FF1251");

animation.resume();
playing = true;
} else {
$("svg path").attr("class", "");
/* $("#circle").attr("class", ""); */
animation.pause();
playing = false;
}

});

});

Respostas:

Você nunca deve misturar animação JS + CSS. Remova o seguinte CSS:

#ring.active {
-webkit-animation: load 20s 1 forwards;
-moz-animation: load 20s 1 forwards;
-o-animation: load 20s 1 forwards;
-ms-animation: load 20s 1 forwards;
animation: load 20s 1 forwards;

-ms-animation-play-state: running;
-o-animation-play-state: running;
-moz-animation-play-state: running;
-webkit-animation-play-state: running;
animation-play-state: running;
}

#ring.paused {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}