Kategorie: Firefox ruckelt bei Skalierung eines Bildes

Großes Problem mit einfacher Lösung: Ich hatte versucht mit Hilfe des Monkey Patches für jQuery eine einfache Bildanimation zu machen. Das Bild sollte langsam größer skaliert werden:

var _time = new Date().getTime();
var iv = setInterval( function () {
   var f = (1 / 10000 * Math.min(10000, (new Date().getTime() - _time)));
   var s = 1.2 - 0.2 * f;
   $('.bild').scale( s );										
}, 30);

Sieht in Safari perfekt aus – aber Firefox, der sonst bei allen CSS3 Dingen eher pflegeleicht ist, skaliert das Bild katastrophal: Es ruckelt und wackelt unschön.

Die Lösung ist dämlich, aber zuverlässig: Zusätzlich zu der scale()-Anweisung auch das Bild leicht rotieren lassen mit rotate() – es reicht ein „unsichtbarer“ Wert von 0.1 damit das Bild sauber in Firefox skaliert wird:

var _time = new Date().getTime();
var iv = setInterval( function () {
   var f = (1 / 10000 * Math.min(10000, (new Date().getTime() - _time)));
   var s = 1.2 - 0.2 * f;
   $('.bild').scale( s );
   $('.bild').rotate( 0.1 * f );										
}, 30);