Css3 Transform Difference in Firefox and Chrome and Ie

CSS3 transform difference in Firefox and Chrome and IE

I am not sure about why Chrome has problems with your code, but you can simplify it and then it will work ok in all the browsers.

You should change your CSS to

.footer-social-links a:hover::before,
.footer-social-links a:focus::before {
    width: 80%; 
    left: 10%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

.footer-social-links a:hover::after,
.footer-social-links a:focus::after {
    width: 80%;
    right: 10%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

It is useless to do a translate in X and at the same time modify your left value; better concentrate the changes in a single value (left) and eliminate the translateX

Why is this transition acting differently on Chrome and Firefox?

You can't really use percentage values for transform-origin right now because percentage values are treated differently in Chrome and Firefox. That applies also to pseudo values like "center" which is defined to be equivalent to "50%".

You need to use absolute pixel values instead to be cross-browser compatible.

.logo > .logo-compass-frame {  fill: none;  stroke: black;  stroke-width: 15;  stroke-linecap: round;  stroke-miterlimit: 10;}
.logo > .logo-compass-north, .logo > .logo-compass-south {  stroke: black;  stroke-width: 8;  stroke-miterlimit: 10;}
.logo > .logo-compass-south {  fill: none;}
.logo > .logo-compass-center {  fill: black;  stroke: black;  stroke-width: 3;  stroke-linecap: round;  stroke-miterlimit: 10;}
.logo > .logo-compass-north, .logo > .logo-compass-south, .logo > .logo-compass-center {  transition: 0.5s ease-in-out;  opacity: 1;}
.logo:hover > .logo-compass-north {  transform-origin: 138px 99px;}
.logo:hover > .logo-compass-south {  transform-origin: 138px 173.5px;}
.logo:hover > .logo-compass-north {
  transform: rotate(90deg) scale(1.5) translate(10px);}
.logo:hover > .logo-compass-south {  transform: rotate(90deg) scale(1.5) translate(-10px);}
.logo:hover > .logo-compass-center {  opacity: 0;}

<svg class="logo" x="0px" y="0px" viewBox="0 0 272.6 272.6">  <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8" />  <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5" />  <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1" />  <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7" /></svg>

CSS3 transform property working differently in Internet Explorer

Easier Approach

Instead of positioning from the top and left, position instead from the bottom and right. After you've done this, simply change your -50% translations to positive 50%. This will remove the overflow e.g.

.center-center {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

You can see these changes in action here: http://jsfiddle.net/bd17gsss/

It's worth noting that this bug is still filed, and our team will still give it the appropriate consideration when time and cycles permit us to do so.

Original Answer

There appears to be a layout bug with position: absolute in this particular demo. It's behaving similar to position: relative when it shouldn't be. I've opened a bug on this issue for the Internet Explorer team to investigate further.

For now, you could switch your position value from absolute to fixed, which appears to render the centered element correctly. This prevents you from having to use a fixed set of dimensions over and over, and instead allows you to use this approach as a general-purpose .modal style class that will center anything it is applied to.

The obvious caveat with this change is that your element is positioned according to the viewport, and no longer the document itself. This will freeze it on the screen effectively.

.modal {
    position: fixed;
    top: 50%; left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

To demonstrate the success this approach has with various dimensions, we can cycle through a few example sets and test the rendering of the element to ensure it is properly centered:

(function () {

    var xandy,
        index = 0,
        modal = document.querySelector( ".modal" ),
        sizes = [
            { x: "50%"  , y: "30%"   },
            { x: "400px", y: "288px" },
            { x: "25vw" , y: "75vh"  },
            { x: "90%"  , y: "90%"   }
        ];

    setInterval(function changeSize () {
        xandy = sizes[ index++ % sizes.length ];
        modal.style.width = xandy.x;
        modal.style.height = xandy.y;
    }, 1000 );

}());

The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/c00u5ev8/

Transform scale working on Chrome but not on Firefox

Before I start explaining the problem with your code, here is a word of caution - Do not use transitions and animations together. They generally end up causing problems like the one faced here.

When an animation is specified on an element, it will take complete control over the properties that are being animated unless there is a rule with !important setting. If !important setting is used then that rule takes precedence over the animation. (but unfortunately Chrome and Firefox seem to be handling this case differently).

As per W3C Spec:

CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules.

^{emphasis is mine}

In your code, there were two problems and they are as follows:

• Within .ripple selector, you were specifying the transition-duration as 0s, which means, there is no transition at all and that the change of transform is an instant one. As explained in the W3C Spec, Firefox seems to be (correctly) giving the control to the rule with !important setting (that is, the transform and transition within .ripple selector) and so it transitions the state change immediately after the specified 1s delay⁺. Chrome lets animation take control and thus produces the effect you are looking for.
• Firefox seems to animate the element quicker than Chrome does and so while a duration of 1s is enough for the animation in Chrome, FF needs it to be 2s to be slower and show the effect.

⁺ - You can further verify this by removing the !important settings on the rules. Once !important is removed, the animation would take control.

$("#animate").click(function() {  $("#square").toggleClass("animate");  $("#fab").toggleClass("ripple");});

@keyframes ripple {  from {    transform: scale(0)  }  to {    transform: scale(20)  }}#square {  position: relative;  width: 300px;  height: 300px;  overflow: hidden;  border: 1px solid red;  transition: background 0.1s linear 0.6s, transform 1s;  transform: rotate(0deg);}#fab {  position: absolute;  width: 56px;  height: 56px;  border-radius: 50%;  background: #4FB5AB;  top: 122px;  right: 0;  transform: scale(1);  transition: transform 1s;}#fab.ripple {  animation: ripple 2s 1s;  transform: scale(20);  /*Duration - delay */  transition: transform 1s 1s;}#square.animate {  transform: rotate(90deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="square">  <div id="fab"></div></div><br /><button id="animate">animate</button>

.rotate { display: inline-block; }