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

Я действительно в недоумении, почему в разных браузерах все будет иначе. Я надеялся, что кто-нибудь сможет просветить меня о том, что происходит ...

Вот ссылка jsFiddle. Если вы запустите ее в обоих браузерах, вы увидите, что позиция анимации отличается. В FF, похоже, коробка растет, это то, что я хочу. В хроме это очень странно ...

Answer 1

Ваши переходы явно требуют, чтобы "верх" и "левый" были анимированы.Они должны начать откуда-то, поэтому они начинают с нуля.Это странный случай, потому что стиль "клонированный элемент" - это не то, что дает элементу значения "top" и "left", это ваш код, который помещает их прямо в элемент.

Вы также анимация поля, однако;Хром, похоже, не обращает на это особого внимания.Если я уберу «верхние» и «левые» свойства из перехода, это заставит его действовать немного больше как Firefox.

Концепция применения перехода к элементу одновременно с его появлением.это немного смущает меня.Я надеюсь, что кто-нибудь придет и даст лучший ответ.