Elementi di ridimensionamento di Chrome 21 durante la rotazione

Question

Penso che questo sia un bug nell'ultimo Chrome (21.0.1180.57), ma ho pensato di postare qui solo per ricontrollare.

Sto cambiando la rotazione di un elemento utilizzando javascript e utilizzando le transizioni del webkit per animare la rotazione. A volte, a seconda della rotazione iniziale e finale, l'elemento si modifica in modo casuale insieme alla rotazione. Ho creato una demo qui: http://jsfiddle.net/XCwUQ/ (fai clic sul corpo).

Qualcuno sa perché questo potrebbe accadere?

Cheers,

Christian

Answer 1

UPDATE: sembra essere fissato ora in Chrome 23. (Si veda il commento @joequincy sulla domanda iniziale)

---

In effetti, questo sembra un insetto. Fino a quando non viene risolto, è possibile aggirare il animate() funzione di jQuery come questo:

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

Rimuovere le dichiarazioni CSS transition e aggiungere:

border-spacing: 163px; 

Questo esempio abusa l'attributo border-spacing, dal momento che ha vinto' t influenzano il layout nella maggior parte dei casi.

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

(Grazie a questa risposta: Animate element transform rotate)

NOTA: Opzionalmente si può utilizzare il jQuery trasformare plugin per rimuovere le brutte molteplici css() chiamate e per una versione più semplice della sintassi animate() (ma aggiungendo overhead). Vedi https://github.com/louisremi/jquery.transform.js