I've found some strange(?) behavior when i animate transform and left/top properties. I use jQuery + some helper to work with transform (it just adds vendor prefixes and makes some fixes that should not be reason for the problem i'm talking about). So, jquery works great and do it work well. When you animate transform scale and left/top separately - it's also work but not when you do it TOGETHER.

Here is my demo example: .html

As you can see during an animation both properties changes but position properties doesn't effect on the screen - .png. Next, when animation finished you can change window size and block will hold new position that it should be held during an animation. So, it means that after resize happens 'repaint' process and element change it position. But repaint process also happens each time of animation step, so, why new value of 'left' property doesn't apply?

First time i've seen this problem in Chrome 12. I also have tested in Safari 5.0.x and there wasn't problem there, then they released 5.1 and in new version we can see same problem as in Chrome. In FF4-5 it works fine.

Could anyone explain to me this behavior of Webkit browsers?

I've found some strange(?) behavior when i animate transform and left/top properties. I use jQuery + some helper to work with transform (it just adds vendor prefixes and makes some fixes that should not be reason for the problem i'm talking about). So, jquery works great and do it work well. When you animate transform scale and left/top separately - it's also work but not when you do it TOGETHER.

Here is my demo example: http://noname.vrn.ru/transform/test.html

As you can see during an animation both properties changes but position properties doesn't effect on the screen - http://vns.ru/screenshots/transform-20110806-140111.png. Next, when animation finished you can change window size and block will hold new position that it should be held during an animation. So, it means that after resize happens 'repaint' process and element change it position. But repaint process also happens each time of animation step, so, why new value of 'left' property doesn't apply?

First time i've seen this problem in Chrome 12. I also have tested in Safari 5.0.x and there wasn't problem there, then they released 5.1 and in new version we can see same problem as in Chrome. In FF4-5 it works fine.

Could anyone explain to me this behavior of Webkit browsers?

• javascript
• jquery
• animation
• webkit
• transform

• This seems to work fine in Chrome 13 - though I can see it doesn't work in Safari 5.1. – Matthew Commented Aug 6, 2011 at 15:28

1 Answer 1

You need to trigger hardware acceleration on the layer:

#block {
    -webkit-transform-style: preserve-3d;
}