css3 плохая производительность анимации (только для Chrome)

Я работаю над сайтом с использованием анимации css3, он отлично работает в Safari и Firefox, но по какой-то причине производительность в Chrome ужасна. (Около 15 кадров в секунду)css3 плохая производительность анимации (только для Chrome)

http://triple-tested.com/animations/

Анимация довольно проста, в основном несколько больших кругов слоистые вверх. Я также добавил несколько анимаций sprite sprite с помощью 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 на макинтош (кстати 17.0.963.93)

Вы можете увидеть CSS (используя меньше) здесь КСТАТИ http://triple-tested.com/animations/css/style.less

источник

2012-03-26 michael

Есть ли у вас какие-либо тени CSS на странице? Я заметил, что хром имеет тенденцию работать исключительно медленно при перерисовке теней – danwellman

nope, без теней. Это в основном четыре или пять круговых изображений, вращающихся. – michael

Приятная анимация! Я дал ему возможность использовать 18. (бета). Все еще нервный. Возможно, вы захотите взять эту проблему на свой трекер, чтобы узнать, что разработчики должны сказать. См. Http://code.google.com/p/chromium/issues. –

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

Я закончил тем, что отменил некоторые анимации для хрома, изящно откинулся на статические изображения.

источник

2012-03-28 09:24:56 michael

css3 плохая производительность анимации (только для Chrome)

ответ

Смежные вопросы