CODEWITHSUNDEEP
javascriptperformancegoogle-chromeanimationcss
michael
michael

Reputation: 1202

css3 poor animation performance (Chrome only)

I'm working on a site using css3 animations, it works perfectly in Safari and Firefox, but for some reason performance in Chrome is awful. (around 15 fps)

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

The animations are quite simple, basically a few large circles layered up. I've also added a few png sprite animations using javascript.

I know about hardware acceleration but I don't think that is the problem, it seems to be some quirk that is unique to Chrome. The css animations perform 'OK' alone but once I add the sprites performance drops considerably. 

    $.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 );
            })();       
        });     
    };

This is the code I've wrote to animate my sprites, but as I said it performs perfect in Safari and Firefox so I don't think it's the problem. Chrome seems to have an issue with animating using css alongside sprites.

I've tried everything I can find online but if anyone has any suggestions please let me know.

I'm using the latest stable chrome on mac btw (17.0.963.93)

You can see the css (using less) here btw http://triple-tested.com/animations/css/style.less

Upvotes: 3

Views: 1894

Answers (2)

F.H.
F.H.

Reputation: 1664

Chrome is known for having issues on simultaneous transitions. One thing that might help is enabling hardware acceleration, e.g. will-change: transform; to make chrome us GPU for the rendering the transition.

.smooth-transition {
    transition: all 0.3s ease-out;
    will-change: transform;
}

Upvotes: 0

michael
michael

Reputation: 1202

Thanks for the replies guys, I think it is an issue with certain versions of chrome as it works perfect in the latest canary builds.

I ended up stripping back some of the animations for chrome, falls back gracefully to static images.

Upvotes: 2

Related Questions