Элементы масштабирования Chrome 21 во время вращения

Я думаю, что это ошибка в последнем Chrome (21.0.1180.57), но я думал, что отправлю сюда только для двойной проверки.

Я изменяю поворот элемента с помощью javascript и используя переходы webkit для анимации вращения. Иногда, в зависимости от начального и конечного вращения, элемент случайным образом масштабируется вместе с вращением. Здесь я сделал демо: http://jsfiddle.net/XCwUQ/ (щелкните по телу).

Кто-нибудь знает, почему это может произойти?

Приветствия,

Christian

Ответ 1

ОБНОВЛЕНИЕ: Кажется, теперь он исправлен в Chrome 23. (см. комментарий @joequincy по исходному вопросу)

Действительно, это похоже на ошибку. Пока он не будет исправлен, вы можете работать с функцией 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/

(Благодаря этому ответу вращение элемента анимации вращается)

ПРИМЕЧАНИЕ. Вы можете дополнительно использовать плагин преобразования jQuery для удаления уродливых множественных вызовов css() и для более простой версии синтаксиса animate() (но с добавлением служебных данных). См. https://github.com/louisremi/jquery.transform.js