クロム21回転中のスケーリング要素

Question

これは最新のChrome（21.0.1180.57）のバグだと思うが、私はここで二重チェックするだけだと思った。

javascriptを使用して要素の回転を変更し、回転をアニメーション化するためにWebkitトランジションを使用しています。時々、開始と終了の回転に応じて、要素は回転とともにランダムにスケールされます。私はここでデモを作った：http://jsfiddle.net/XCwUQ/（ボディをクリック）。

これはなぜ起こっているのでしょうか？

乾杯、

クリスチャン

Answer 1

UPDATE：

---

（元の質問に@joequincyのコメントを参照してください）クローム23に今固定されるようだ確かに、これはのように思えますバグ。それが修正されるまで、あなたはこのようなjQueryのanimate()機能を回避することができます。

$(function() { 
    var rotation = 163; 
    $('body').on('click', function() { 
     rotation = (rotation == 163) ? 198 : 163;    
     $('#wheel').animate({ 
      borderSpacing: rotation 
     }, { 
      step: function(now, fx) { 
       $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');  
       $(this).css('-moz-transform', 'rotate(' + now + 'deg)');  
       $(this).css('-ms-transform', 'rotate(' + now + 'deg)');  
       $(this).css('-o-transform', 'rotate(' + now + 'deg)');  
       $(this).css('transform', 'rotate(' + now + 'deg)');  
      } 
     });   
    }); 
});​ 

transition CSS文を削除し、追加します。

border-spacing: 163px; 

この例を、それが勝ったため、「、border-spacing属性を悪用ほとんどの場合レイアウトに影響しません。

http://jsfiddle.net/hongaar/wLTLK/1/

（この回答に感謝：Animate element transform rotate）を参照してください

NOTE：オプションでjQueryの醜い複数css()呼び出しを削除するプラグインを変換し、animate()構文の簡単なバージョンのために使用することができますが（しかし、オーバーヘッドを追加する）。 https://github.com/louisremi/jquery.transform.js