块级链接宽度和高度过渡时的毛刺

Question

我对li项目的宽度和高度转换有问题。链接的边缘底部有一些毛刺和闪烁。这不容易解释所以我拍了一段视频。在这里查看（观看社交网站链接）：

https://www.youtube.com/watch?v=1SAB0CqmID4

第一个浏览器是Chrome，第二个是Firefox。奇怪的是，这个小故障并没有在Firefox中发生，但在其他浏览器中，它确实存在（Chrome，Safari，Opera）。

以下是代码：

HTML

<div class="social">
    <ul class="list-unstyled">
        <li><a href=""><i class="fa fa-facebook centered"></i></a></li>
        <li><a href=""><i class="fa fa-twitter centered"></i></a></li>
        <li><a href=""><i class="fa fa-google-plus centered"></i></a></li>
    </ul>
</div>

CSS（Sass）

.social {
    position: fixed;
    left: 0;
    bottom: 45px;
    z-index: 100;

    li {
        display: block;
        width: 60px;
        height: 60px;
        opacity: 0.5;
        text-align: center;
        font-size: 32px;
        transition: width 2s ease-in, height 2s ease-in, font-size 2s ease-in, opacity 0.2s ease-in-out;

        a {
            display: table;
            width: 100%;
            height: 100%;
            color: white;
            text-decoration: none;
        }
    }

    li:hover {
        opacity: 0.9;
        transition: opacity 0.2s ease-in-out;
    }

    .fa-facebook {
        background: #3B5998;
    }
    .fa-twitter {
        background: #55acee;
    }
    .fa-google-plus {
        background: #d34836;
    }
}

.social-small li {
    width: 46px;
    height: 46px;
    font-size: 22px;
    transition: width 2s ease-out, height 2s ease-out, font-size 2s ease-out, opacity 0.2s ease-in-out;
}

JAVASCRIPT（jQuery） - 开始滚动转换

$(window).scroll(function() {
    var hT = $('#hero').offset().top,
        hH = $('#hero').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT+hH-wH+45)){
        $(".social").addClass("social-small");
    }
    else {
        $(".social").removeClass("social-small");
    }
    if (wS > (hT+hH-wH+27)){
        $(".site-nav").addClass("site-nav-small");
    }
    else {
        $(".site-nav").removeClass("site-nav-small");
    }            
});

任何想法如何解决？是不是Firefox已经解决了这个问题？

谢谢。