크롬에서 CSS3 전환이 원활하지 않습니다.

Question

마우스 오버시 여백 값을 기반으로 일부 링크에 애니메이션을 적용하기 위해 CSS3 전환을 사용하고 있습니다. 예상대로 애니메이션이 적용되지만 Chrome의 애니메이션은 Firefox, IE10과 같은 다른 브라우저에서와 같이 매끄럽지 않습니다.

크롬에서 링크를 가리키면 다른 모든 링크가 약간 움직입니다. 아래 링크를 확인하십시오.

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

UL 인증 사회적 여백을 증가 아이의 새로운 폭을 acomodate하기 위해 폭을 변화

<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/

Answer 1

HTML. 아이들은 이것 때문에 떠났지만, 그 다음 아이의 마진은 다시 계산되고 그들은 올바른 위치로 돌아갑니다.

는이 폭이 고정합니다

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

Answer 2

당신은 float: right 링크 자체는 문제를 해결하기 위해 수 있습니다.

working demo

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

또한 더 -ms-transition 없다. IE10 supports transitions unprefixed, while IE9 does not support them at all.