CSS3 transitions inconsistent across FF and Chrome

So I have created a CSS3 animation that does not behave consistently across the different browsers. Here is a quick and dirty overview, and I have included a JSFiddle link at the end.

Here is the CSS:

.cloned_object {

   position:absolute;

   background-color:white;

   width: 700px;

   height: 640px;

   margin: 0; /*for centering purposes*/

   -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;

   -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;

   -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;

   transition: width 1s, height 1s, top 1s, left 1s, margin 1s;

}

and the JS function:

$('.content_cell').on('click', function(event) {

        // if the user is on a browser older then IE9

        if ($.browser.msie && $.browser.version.substr(0,1)<10) {

            var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');

            $clonedElement.css({left:$(this).position().left, 

                                top:$(this).position().top, 

                                opacity:1.0}) ;



            selectedPos = $(this).position();



            var currentPos = $('#invitedToChatCell').position();



            $clonedElement.animate({

                height:640, width:700, 

                //position:'absolute', 

                left:currentPos.left, 

                top:currentPos.top, 

                opacity:1.0 

            }, 500, function(){ $('.cloned_object > ul').toggle(); });



        } else {

            var currentPos = $('#invitedToChatCell').position();



            var $clonedElement = $( this ).clone(true).attr('class', 'content_cell').appendTo('#mainContentTable');

            $clonedElement.css({left:$(this).position().left, 

                                top:$(this).position().top}) ;



            $clonedElement.addClass('cloned_object');               

            $clonedElement.css({'margin-left':-$(this).position().left+125,

                                'margin-top':-$(this).position().top,

                                }) ;



            selectedPos = $(this).position();           



            $('.cloned_object > ul').toggle();

        }                   



        event.stopPropagation();

    });

I am really at a loss as to why it would be different across browsers. I was hoping someone could enlighten me as to what is going on...

HERE IS THE JSFIDDLE LINK If you run it in both browsers, you will see the animation position is different. In FF, it looks like the box grows, that is what I want. In chrome it's very strange...