div shifts after jquery scale effect

I have a div that after scaling, shifts to the left and down and I can't see why this is happening. See http://jsfiddle.net/7A7gs/2 for all code.

I've tried using animate width/height instead of scale, and the same thing happens. I've also tried size instead of scale. Same thing.

Also, if I change the scale from 'both' to vertical, the div does not shift. If I change the scale to 'horizontal' the div shifts.

Please let me know where I'm going wrong here! MTIA.

EDIT: The desired behaviour is that the clicked div shifts to the top left corner of the window (this is currently working correctly), then expands to fill the width and height of the window.

Currently, it expands to fill the width and height of the开发者_如何学运维 window and then shifts downward and to the left, which is not the desired behaviour.

this is a known bug, please read here for a quick fix and a solution: Element jumps to wrong position after "scale" effect

In the end, it appears that the offset positioning was causing the problem. I changed the code to switch between relative and absolute positioning and the animation stopped jumping.