Chrome 21 scaling elements during rotation

Question

I think this is a bug in the latest Chrome (21.0.1180.57), but I thought I'd post here just to double check.

I'm changing the rotation of an element using javascript, and using webkit transitions to animate the rotation. Sometimes, depending on the start and end rotation, the element randomly scales along with the rotation. I've made a demo here: http://jsfiddle.net/XCwUQ/ (click the body).

Does anyone know why this might be happening?

Cheers,

Christian

Answer 1

UPDATE: Seems to be fixed now in Chrome 23. (See @joequincy comment on the original question)

---

Indeed, this seems like a bug. Until it is fixed, you can work around with the jQuery animate() function like this:

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

Remove the transition CSS statements and add:

border-spacing: 163px;

This example misuses the border-spacing attribute, since it won't affect your layout in most cases.

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

(Thanks to this answer: Animate element transform rotate)

NOTE: You can optionally use the jQuery transform plugin to remove the ugly multiple css() calls and for a simpler version of the animate() syntax (but adding overhead). See https://github.com/louisremi/jquery.transform.js