Div shift after jquery scale effect

Question

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

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

Also, if I zoom from “both” to vertical, the div will not move. If I scaled to “horizontal”, the div shifts.

Please let me know where I am going wrong! MTIA.

EDIT: The desired behavior is that the clicked div is shifted to the upper left corner of the window (it currently works correctly) and then expanded to fill the width and height of the window.

It is currently expanding to fill the width and height of the window, and then moving down and left, which is not the desired behavior.

Answer 1

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

Answer 2

this is a known bug, please read here for a quick fix and solution: The item goes into the wrong position after the “scale” effect