Я работаю над сайтом с использованием анимации css3, он отлично работает в Safari и Firefox, но по какой-то причине производительность в Chrome ужасна. (около 15 кадров в секунду)
http://triple -tested.com / анимация /
Анимации довольно просты, в основном несколько больших кругов, выложенных слоями. Я также добавил несколько анимаций png спрайтов с использованием javascript.
Я знаю об аппаратном ускорении, но я не думаю, что это проблема, похоже, это какая-то особенность, уникальная для Chrome. Анимации CSS выполняют «ОК» в одиночку, но как только я добавляю, производительность спрайтов значительно падает.
$.fn.spriteme = function(options) {
var settings = $.extend({ framerate: 30 }, options);
return this.each(function(){
var $el = $(this),
curframe = 0,
width = settings.width,
fr = 1000/settings.framerate;
(function animloop(){
if(curframe == settings.frames) { curframe = 0; }
$el.css('background-position', (curframe*width)*-1 + 'px center');
curframe++;
setTimeout( animloop, fr );
})();
});
};
Это код, который я написал для анимации своих спрайтов, но, как я уже сказал, он отлично работает в Safari и Firefox, поэтому я не думаю, что это проблема. Похоже, в Chrome возникла проблема с анимацией с использованием css и спрайтов.
Я перепробовал все, что смог найти в Интернете, но если у кого-то есть какие-либо предложения, пожалуйста, дайте мне знать.
Я использую последнюю стабильную версию Chrome на Mac (17.0.963.93)
Вы можете увидеть CSS (используя меньше) здесь, кстати
http://triple -tested.com / анимация / CSS / style.less