在FF和Chrome上CSS3轉換不一致

所以我創建了一個CSS3動畫，在不同的瀏覽器中表現不一致。這裏是一個快速和骯髒的概述，並在最後包含了一個JSFiddle鏈接。在FF和Chrome上CSS3轉換不一致

這裏是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中，它看起來像盒子增長，這是我想要的。在鉻這是非常奇怪的......

來源

2012-02-08 gabaum10

在FF10和Linux上的Chrome之間看起來完全一樣。 *編輯*等我看到;它就像是從Chrome左起... – Pointy 2012-02-08 14:19:36

是的，這正是我的意思...... – gabaum10 2012-02-08 14:31:38

您的轉場明確要求「頂」和「左」動畫。他們必須從某個地方開始，所以他們從零開始。這是一個奇怪的例子，因爲「克隆元素」風格並不是給元素賦予「頂」和「左」值，而是你的代碼將它們直接放在元素上。

你是也動畫邊緣，但是; Chrome似乎並沒有太在意這一點。如果我將「頂級」和「左側」屬性從轉換中移除，它會使它更像Firefox。

將元素轉換到元素同時出現的概念對我來說有點困惑。我希望有人來，並提供更好的答案。

來源

2012-02-08 14:58:18 Pointy

我也只是偶然發現了這個事實。 :)基本上，我刪除了頂部和左側的動畫，並且完美運行。發生了什麼，就像你說的那樣，是將動畫應用到頂部和左側。我不想要這些動畫，我只是希望它移動到動畫的正確位置。 – gabaum10 2012-02-08 15:03:15

感謝您的回答！希望這有助於解決一些人在路上遇到的困惑。 :) – gabaum10 2012-02-08 15:04:10

好吧，好吧，很高興幫助，並感謝有趣的問題。 – Pointy 2012-02-08 15:09:57

在FF和Chrome上CSS3轉換不一致

回答

相關問題