Question

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…

Answer 1

Your transitions explicitly request that the “top” and “left” be animated. They’ve got to start from somewhere, so they start from zero. It’s a weird case because the “cloned-element” style is not what’s giving the element the “top” and “left” values, it’s your code which puts them straight on the element.

You’re also animating the margin, however; Chrome doesn’t seem to pay much attention to that. If I take the “top” and “left” properties out of the transition, it makes it act a little more like Firefox.

The concept of applying a transition to an element at the same time it comes into existence is a little confusing to me. I hope somebody comes along and provides a better answer.