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

Interesting, bug seems evident on Windows and OSX for me, but I don't have Linux to test. — Christian, Aug 02 '12 at 03:46
have this problem as well, the animation would show it's first frame and stays like that, if it's a keyframe animation, it would show it's last frame when the animation finishes; check this : http://daneden.me/animate/ ; all the ROTATION effects is not working — tom91136, Aug 02 '12 at 03:53
confirmed Chrome 21.0.1180.57 on linux(fedora 17) does not have this issue; anyone knows how to solve this? — tom91136, Aug 02 '12 at 13:12
Working ok on Ubuntu 12.04 but on MacOS X 10.6.8 on Chrome 21.0.1180.57 I'm having the same issue.... any ideas? — Claudio Acciaresi, Aug 03 '12 at 17:59
I've submitted a [bug report to Chrome](http://code.google.com/p/chromium/issues/detail?id=139994), hopefully they fix this soon. It's hard telling clients that it's not your fault and there's nothing you can do to fix it. — Christian, Aug 05 '12 at 01:47
Excellent, I'm having a similar problem but with Firefox 14 on MacOs and Ubuntu: http://stackoverflow.com/questions/11821553/css3-animation-under-firefox-14 — Claudio Acciaresi, Aug 06 '12 at 20:35
still happens. sometimes at least (\w chrome 22.0.1229.94, MacOSX Lion) — Martin Schuhfuß, Oct 22 '12 at 22:21
add a note to the chromium issue, the more people the better :) http://code.google.com/p/chromium/issues/detail?id=139994 — Christian, Oct 26 '12 at 16:52
Cannot reproduce in Chrome 23.0.1271.64 on Windows 7. May be fixed now. — joequincy, Nov 11 '12 at 01:05

score 1 · Accepted Answer · edited May 23 '17 at 12:18

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

@Christian Varga - still not your fault, but now you can do something about it! :) — Joram van den Boezem, Nov 05 '12 at 14:31
Thanks for the detailed answer, also can confirm the latest Chrome fixed it. So now we have 2 ways to address the issue :) — Christian, Nov 12 '12 at 12:03

Chrome 21 scaling elements during rotation

1 Answers1