CSS3 schlechte Animation Leistung (nur Chrome)

Ich arbeite auf einer Website mit CSS-Animationen, funktioniert es perfekt in Safari und Firefox, aber aus irgendeinem Grund Leistung in Chrome ist schrecklich. (Ca. 15 fps)CSS3 schlechte Animation Leistung (nur Chrome)

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

Die Animationen sind recht einfach, im Grunde ein paar großen Kreise geschichtet. Ich habe auch ein paar PNG Sprite Animationen mit Javascript hinzugefügt.

Ich weiß über Hardwarebeschleunigung, aber ich denke nicht, dass das das Problem ist, scheint es eine Eigenart zu sein, die einzigartig für Chrome ist. Die CSS-Animationen führen "OK" alleine aus, aber sobald ich die Sprites hinzufüge, fällt die Leistung deutlich ab.

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

Dies ist der Code, den ich geschrieben habe mein Sprites zu animieren, aber wie gesagt es in Safari und Firefox perfekt durchführt, so ist Ich glaube nicht, dass das Problem. Chrome scheint ein Problem bei der Animation mit CSS neben Sprites zu haben.

Ich habe alles versucht, was ich online finden kann, aber wenn jemand irgendwelche Vorschläge hat, lass es mich wissen.

ich die neueste stabile Chrom bin mit btw auf mac (17.0.963.93)

Sie die CSS sehen können (weniger verwenden) hier btw http://triple-tested.com/animations/css/style.less

Quelle

2012-03-26 michael

Haben Sie CSS-Schatten auf der Seite? Ich habe festgestellt, dass Chrome beim Neuzeichnen von Schatten außergewöhnlich langsam läuft – danwellman

nein, keine Schatten. Es sind im Grunde vier oder fünf kreisförmige Bilder, die rotieren. – michael

Schöne aussehende Animation! Ich habe es mit 18. (beta) versucht. Immer noch nervös. Vielleicht möchtest du dieses Problem zu ihrem Tracker bringen, um zu sehen, was die Entwickler zu sagen haben. Siehe http://code.google.com/p/chromium/issues. –

Danke für die Antworten Jungs, ich glaube, es Dies ist ein Problem mit bestimmten Versionen von Chrome, da es in den neuesten kanarischen Builds perfekt funktioniert.

Ich landete einige der Animationen für Chrom zurück, fällt anmutig auf statische Bilder zurück.

Quelle

2012-03-28 09:24:56 michael

CSS3 schlechte Animation Leistung (nur Chrome)

Antwort

Verwandte Themen