Chrome 7 issue, animation of more than one transformation

[steso]

since chrome v.7 is out I'm having some difficulties. Chrome won't animate more than one parameter (only the last one seems to be animated). I try to move, scale and rotate an image at the same time. Here a code snippet I'm using:

$('#bgpic').animate({rotate: 8, scale: 5, translate: [-60,0] },400);

works fine in all browsers expect chrome 7.0 (mac and windows). chrome 6.0 worked fine! however if I use the transform() command chrome applies all the transformations (instantly). In the example I gave above, just the translation is executed. If I put the rotation to the end, only that one is applied. If I use different animation statements => same effect, only last animation is executed I also tried different spellings with " and ' and stuff but didn't help.

I'm using 2d transform 0.8.0 min and jquery 1.4.3

[steso]

bye the way, it seems to work again in google chrome dev channel 9.0.570.0 dev

[heygrady]

https://github.com/heygrady/transform/issues#issue/14

The issues is in how attributes are handled. You can correct it by sending both values for scale.

You also might try an early version of 0.9 that was re-written to take advantage of jQuery 1.4.3's new CSS features. I'm going to do more testing on that this weekend and release but it already fixes the animation problems you are experiencing.

https://github.com/heygrady/transform/blob/master/dist/jquery.transform-0.9.0pre.min.js

[steso]

Using the suggested version for the scale parameter (scale: [5, 5] ) doesn't make any difference in my case. There is still only one parameter (the last one) executed in the animation, in my example the translation. Maybe it's a difference between .animate(parameter1).animate(parameter2) rather than .animate(parameter1, parameter2) as I use it. But the pre 0.9.0 works like a charm, thanks a lot!

[heygrady]

So, 0.9.0 works just fine for you? And your saying that passing scale as an array didn't work on 0.8.0?

The problem has less to do with how you're using it and more to do with hwo I handled the scale property being incorrect. Other people noticed the issue when they were chaining animations but that's an irrelevant difference.

For fun:

// Queues 2 animations to run back-to-back
$('#some-div').animate({height: '200px'}).animate({width: '200px'});

// Animates the height and width at the same time
$('#some-div').animate({height: '200px', width: '200px'});

// Uses per-property easing to animate height
$('#some-div').animate({height: ['200px', 'swing'], width: '200px'});

http://api.jquery.com/animate/#per-property-easing

Note that passing in an array for a value has special meaning in jQuery.animate. You might also have better results passing the paramaters as a string.

// Accidentally conflicts with per-property easing
$('#some-div').animate({scale: [0.5, 0.5]});

// Safer way to send it
$('#some-div').animate({scale: '0.5, 0.5'});

[steso]

the scaling property by its own was never a problem neither as array nor as single parameter. The problem was when it was animated in combination with other transform-parameters. $('#some-div').animate({height: '200px', width: '200px'}); worked fine in chrome as well, but $('#some-div').animate({rotate: '20', translate: '10, 20'}); executed only the last transform attribute, in this case the translation.

[heygrady]

New version of 0.9.0pre was tested this weekend. It requires units for any values that need units in CSS. The final version should be out next week.

https://github.com/heygrady/transform/raw/master/dist/jquery.transform-0.9.0pre.min.js