CSS3 transform difference in Firefox and Chrome and IE

Question

I think it may have something to do with a pseudo element, but I'm not sure. I am having difficulties with the effect of a transform transition using css3. In Firefox v24, the effect works as I want it to - see the CodePen here http://codepen.io/patrickwc/pen/aKEec but in Chrome and IE, the border effect of the links animate and then suddenly switch back into position. It is difficult to describe so the best way is to look at the effect in Firefox then in Chrome or IE.

body {
  background: #000;
  color: #fff;
}

p {
  text-align: center;
}

nav.footer-social-links a {
  position: relative;
  margin: 0 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1px 12px 0 8px;
  height: 32px;
  line-height: 30px;
  outline: none;
  font-size: 0.8em;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

nav.footer-social-links a:hover,
nav.footer-social-links a:focus {
  outline: none;
}

.footer-social-links a::before,
.footer-social-links a::after {
  position: absolute;
  width: 30px;
  height: 2px;
  background: #fff;
  content: '';
  opacity: 0.2;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  pointer-events: none;
}

.footer-social-links a::before {
  top: 0;
  left: 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

.footer-social-links a::after {
  right: 0;
  bottom: 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.footer-social-links a:hover::before,
.footer-social-links a:hover::after,
.footer-social-links a:focus::before,
.footer-social-links a:focus::after {
  opacity: 1;
}

.footer-social-links {
  margin: 0;
  text-align: center;
}

.footer-social-links a {
  color: white;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  display: inline-block;
  text-decoration: none;
}

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

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

<br/>

<nav class="footer-social-links">
  <a href="google" target="_blank">
    <i class="shc icon-e-gplus"></i>Gplus </a>
  <a href="facebook" target="_blank">
    <i class="shc icon-e-facebook"></i>Facebook </a>
  <a href="twitter" target="_blank">
    <i class="shc icon-e-twitter"></i>Twitter </a>
  <a href="linkedin" target="_blank">
    <i class="shc icon-e-linkedin"></i>Linkedin </a>
  <a href="skype" target="_blank">
    <i class="shc icon-e-skype"></i>Skype </a>
  <a href="http://last.fm/user/zerodegreeburn" target="_blank">
    <i class="shc icon-e-lastfm"></i>Lastfm </a>
</nav>

<p>Fixed with help from css-tricks forum and stackoverflow <a href="http://codepen.io/patrickwc/pen/uFGlz" target="_blank">here</a>
</p>

I have a feeling messing with transform-origin might fix it, but I've been unable to get that to work. Any help or explanation as to the difference would be greatly appreciated.

score 3 · Accepted Answer · answered Oct 04 '13 at 18:18

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

Thanks, makes much more sense. I copied this code from a tutorial on another site ([codrops](http://codrops.com)) so I'll let the author know too. Although they kept their lines (width:) the same size so weren't aware of an issue. — patrickzdb, Oct 08 '13 at 15:15

CSS3 transform difference in Firefox and Chrome and IE

1 Answers1

Linked