CSS3の遷移がFFとChromeの間で矛盾します

Question

異なるブラウザ間で一貫して動作しないCSS3アニメーションを作成しました。ここにはすばやく概要があり、最後にJSFiddleリンクが含まれています。ここで

は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; 
} 

とJS機能：

$('.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(); 
    }); 

私はそれがブラウザ間で異なるだろう理由として損失で本当に思います。私は誰かが何が起こっているかについて私を啓発できることを望んでいました...

Here is the jsFiddle link.両方のブラウザで実行すると、アニメーションの位置が違うことがわかります。 FFでは、ボックスが成長するように見えます。つまり、私が望むものです。クロムでは非常に奇妙です...

Answer 1

トランジションでは、「上」と「左」がアニメートされるよう明示的に要求します。彼らはどこかから出発しなければならないので、ゼロから始めます。 "クローン要素"スタイルは要素に "上"と "左"の値を与えているスタイルではなく、要素にまっすぐに置くコードなので、これは変です。

あなたはでものマージンをアニメーション化しています。クロムはあまり注目を集めていないようです。私が "上"と "左"のプロパティを移行から外すと、Firefoxのように少し機能します。

要素に同時に遷移を適用するという概念は、それが現実になると少し混乱します。私は誰かが来て、より良い答えを提供することを願っています。