Kann nicht Rotation gleichzeitig mit anderen Eigenschaften animieren, nur in Safari (nicht Chrome)

Question

Mögliche Duplizieren:
Safari: Absolutely positioned DIVs not moving when updated via DOM

This answer auf eine andere Frage erklärt einen kleinen Hack, mit dem Sie verwenden jQuery, um die Rotation eines Elements zu animieren.

In meiner Situation wollte ich die Rotation eines Elements simultan mit seinen Eigenschaften top: und left: animieren. Also kam ich auf this fiddle.

function transformThing() { 
    $('#thing').animate({ top: '+=50', left: '+=50', borderSpacing: -90 }, { 
     step: function(now,fx) { 
      if(fx.prop === 'borderSpacing') { 
       $(this).css('-webkit-transform','rotate('+now+'deg)'); 
       $(this).css('-moz-transform','rotate('+now+'deg)'); 
       $(this).css('transform','rotate('+now+'deg)'); 
      } 
     }, 
     duration: 1000 
    }, 'swing'); 
} 
$(document).ready(function() { 
    $('#thing').click(function() { 
     transformThing(); 
    }); 
}); 

den Platz Durch Klicken sollte es drehen und nach unten zu bewegen und nach rechts. Und das ist es, was es tut, außer in Safari. Ich benutze Safari 5.1.5 unter Mac OS X 10.7.3, und nur die Rotation animiert.

Ein Mitarbeiter gefunden this jQuery plugin, die Sie das gleiche mit sauberer Syntax tun können, aber es zeigt das gleiche Problem.

Wenn Sie im Web Inspector nachsehen, können Sie sehen, wie sich die Werte von top: und left: ändern und tatsächlich zu den korrekten Werten wechseln. Sie wirken sich jedoch nicht auf das visuelle Layout des Elements aus, es sei denn, Sie schalten es aus und wieder ein.

Offensichtlich ist die Antwort "Ähm, duh, es ist ein Safari-Bug." Aber gibt es eine tiefere Erklärung, die mir helfen könnte, einen Workaround zu finden, oder irgendetwas anderes, das ich versuchen kann?

Answer 1

Die kurze Antwort ist es wird nicht in Safari arbeiten. aber die gute Nachricht ist, es funktioniert gut, wenn Sie Leinwand wie dieses Beispiel verwenden: http://beta.rallyinteractive.com/ die Arbeitsanimationen drehen/transformieren/animieren ein Sprite. Es ist wirklich die einzige Art von Antwort, die ich sehen kann, die dir jemand gibt.