Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

css3 poor animation performance (Chrome only)

css3 poor animation performance (Chrome only)

Problem

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

Problem courtesy of: michael

Solution

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.

Solution courtesy of: michael

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

css3 poor animation performance (Chrome only)

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×