В некоторых браузерах анимация Raphael SVG прерывается

У меня есть объект SVG, который я добавляю на свою страницу, используя Raphael. С примерно 175 путями в 6 наборах я подозреваю, что он считается сложным.

Я оживляю каждый из 6 наборов, используя функцию .animate

function anim(direction, duration){
    return Raphael.animation({transform: "r"+direction+"360 250 250"}, duration).repeat("Infinity");
}
IG.sets.white_outer.animate(anim("",100000)); // 2 paths 
IG.sets.grey_outer.animate(anim("-",100000)); // 25 paths
IG.sets.grey_inner.animate(anim("",100000));  // 25 paths

$(window).load(function(){                      
    IG.sets.BLUE.animate({transform: "r0 250 250"}, 4000, ">");  // 32 paths
    IG.sets.RED.animate({transform: "r0 250 250"}, 3000, ">");   // 29 paths
    IG.sets.GREEN.animate({transform: "r0 250 250"}, 2000, ">"); // 24 paths
}

проблема в том, что в некоторых браузерах это очень изменчивый вид.

Это гладкое, как масло на Mac (проверено: FF, Chrome, Safari). Это также прекрасно для Windows в Chrome, но когда я загружаю Windows FF, Safari или IE8, анимации нестабильны и немного заикаются.

Он даже отлично смотрится на iPad!

Мне бы очень хотелось, чтобы все выглядели великолепно... поэтому я пытаюсь понять, что стоит всей силы в FF и Safari (и в конце дня, надеюсь, все, что бы я ни делал, вызывает также исправление для IE8).

Из других вопросов, которые я видел о прерывистой анимации на Рафаэле, я вижу упоминание о том, чтобы "попасть в кишки", чтобы добавить тайм-аут к функции анимации... (как видно из raphael-min.js)

cz= window.requestAnimationFrame||
    window.webkitRequestAnimationFrame||
    window.mozRequestAnimationFrame||
    window.oRequestAnimationFrame||
    window.msRequestAnimationFrame||
    function(a){setTimeout(a,16)}, /* there is a function here that animates */

Хотя это выглядит как в FF, например, RequestAnimationFrame дает более плавную производительность, чем setTimeout. (Я проверил это, удалив условие mozRequestAnimationFrame и перезагрузив, попробовал различные интервалы времени ожидания)

Есть ли что-то еще, что мне может не хватать, что может помочь улучшить частоту кадров кросс-браузера в моей анимации?

Примечание, например, изображение имеет значение по умолчанию 500x500, и вращение происходит вокруг центра изображения (точка 250x250), однако изображение отображается на странице 1000x1000 (с видовым экраном, выполняющим масштабирование при загрузке страницы).

Возможно ли, что если у меня есть дизайнер, измените размер изображения на холст 1000x1000, и я с самого начала показываю в полном размере, что у меня будет стимул? Может быть, "более плавная поездка"? Я не уверен, какие факторы влияют на анимацию и производительность SVG.

Ответ 1