CSS3 transition not smooth in Chrome

Question

I'm using CSS3 transition for animate some links based on the margin value on mouse hover. Its animating as expected, but animation in Chrome is not smooth as in other browsers such as Firefox, IE10.

In Chrome when I hover on a link, all other links are slightly moving. Please check the link below.

CSS

.social {
    list-style: none;
    float: right;
    text-align: right;
    position: relative;
    top: 15px;
}

.social li {
    padding: 2px 0;
}

.social li a {
    font-size: 18px;
    color: #a6a7a6;

    margin-right: 5px;
    -webkit-transition: margin 400ms;
    -moz-transition:  margin 0.2s ease;
    -o-transition:  margin 0.2s ease;
    -ms-transition:  margin 0.2s ease;
    transition: margin 0.2s ease;
}

.social li a:hover {
    color: #1b1b1b;
    margin-right: 23px;

}

.social .ico {
    background-color: #1b1b1b;
    background-position: center center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    margin-left: 6px;
    opacity: 0;
    filter: alpha(opacity=0);
      -webkit-transition: opacity 400ms;
    -moz-transition:  opacity 0.2s ease;
    -o-transition:  opacity 0.2s ease;
    -ms-transition:  opacity 0.2s ease;
    transition: opacity 0.2s ease;   
}

.social li a:hover .ico {
    opacity: 1;
    filter: alpha(opacity=100);
}

HTML

<ul class="social">
         <li><a href="#">FACEBOOK<span class="ico"></span></a></li>
         <li><a href="#">TWITTER<span class="ico"></span></a></a></li>
         <li><a href="#">LINKEDIN<span class="ico"></span></a></a></li>
         <li><a href="#">YOUTUBE<span class="ico"></span></a></a></li>
</ul>

http://jsfiddle.net/G9M8L/1/

score 3 · Accepted Answer · answered Jan 19 '13 at 21:16

the ul social is changing its width to acomodate the new width of the child that is increasing the margin. the children are going left because of this, but then the margin of the child is recalculated and they go back to the correct position.

just make this width fixed:

.social {
    list-style: none;
    float: right;
    text-align: right;
    position: relative;
    top: 15px;
    width: 121px;
}

Ana · Answer 2 · 2013-01-19T21:22:56.340

3

You can float: right the links themselves to solve the problem.

.social li a {
   float: right;
   /* the rest of the styles */
}

working demo

Also, there is no -ms-transition. IE10 supports transitions unprefixed, while IE9 does not support them at all.

edited Jan 19 '13 at 21:22

answered Jan 19 '13 at 21:16

Ana

35,599
6
80
131

Thank you, I have added the -ms-transition also – Body Jan 21 '13 at 18:46
1

What I was saying was precisely the opposite. That you don't need to add it. IE10 supports `transition`. No `-ms-` prefix needed. IE9 and older don't support transitions at all, with or without the prefix. The `-ms-` prefix was only needed for early IE10 previews http://www.impressivewebs.com/dropping-ms-vendor-prefixes-ie10/ – Ana Jan 21 '13 at 18:59
I did not check the reference links and I thought negatively. Thank you once again, now I have a good understand about transition. Cheers.. – Body Jan 22 '13 at 19:28

CSS3 transition not smooth in Chrome

2 Answers2

Linked