jquery - Chrome-Safariでdivのte側を増減する

Question

私はdivのサイズを増減するためにこのコードを使用します:

$("#div1").hover(function() {
                var $this = $(this);
                $this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({
                    'height': "390",
                    'width' : "840",
                    'marginTop' : "-12",
                    'marginLeft' : "-12",


                });
            },function() {
                   var $this = $(this);
                   $this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({
                    'height': "350",
                    'width' : "800",
                    'marginTop' : "0",
                    'marginLeft' : "0"
                });
            });



            $("#div2").hover(function() {
                var $this = $(this);
                 $this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({
                    'height': "270",
                    'width' : "290",
                    'marginTop' : "-12",
                    'marginLeft' : "-12",


                });
            },function() {
                   var $this = $(this);
                   $this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({
                    'height': "250",
                    'width' : "250",
                    'marginTop' : "0",
                    'marginLeft' : "0"
                });
            }); 

Chrome と Safari が正しく動作しないのはなぜですか?

Firefox では正しく動作しますが、Chrome-Safari では div のサイズを大きくすると、div が移動し、div が別の場所に移動します。

コンソール エラーはありません。

例: http://jsfiddle.net/d3athR0n/S8Nqm/3/

ありがとう。

編集:あなたの助けのための他の質問: https://stackoverflow.com/questions/17460335/slideshow-glitching-on-chrome-safari-with-jquery