CSS过渡期间闪烁错误

Question

我目前正在为我的博客创建一个新主题，并且对标题有问题。看，标头在顶部的位置固定，就像导航栏一样，当用户向下滚动时，它会收缩。但是，在某些浏览器（主要是镀铬，尤其是对于Windows）上，标题上的Twitter图标具有奇怪的闪烁行为，直到下一行持续1/10秒左右。

使用过渡时，我已经看到了很多关于镀铬中闪烁的错误的信息，但没有看起来像这样的东西（还可以，修复程序不适用于我的情况）。这是图标边缘和标题高度的简单过渡。

有人看过类似的东西吗？

非常感谢！

编辑：用小提琴重新创建它。问题仍然在这里：http：//jsfiddle.net/pvmgz/

html`

    <header>
        <div class="container header">
            <a href="#" title="MangeMonBeat"><div id="logo">Logo</div></a>
            <div class="social">
                <div class="search icon">
                </div>
                <div class="facebook icon">
                </div>
                   <div class="twitter icon">
                   </div>
            </div>
        </div>
    </header>
        <div id="button">Scroll</div>

CSS

header {
    width: 100%;
    height: 98px;
    background: #EEE;
    position: fixed;
    top: 0;
    z-index: 9999;
    -webkit-transition: height, ease-in, 0.4s;
       -moz-transition: height, ease-in, 0.4s;
        -ms-transition: height, ease-in, 0.4s;
         -o-transition: height, ease-in, 0.4s;
            transition: height, ease-in, 0.4s;
}
header.scroll {
    height: 60px;
}
header.scroll .header #logo {
    width: 350px;
    height:50px;
}
header.scroll .header .social {
    margin-top: -2px;
}
header.scroll .header .social .icon {
    margin-left: 2px;
}
.header {
    padding: 5px 10px 0;
}
.header #logo {
    width: 400px;
    height:82px;
    background: #696;
    color:white;
    float: left;
    -webkit-transition: width, ease-in, 0.4s;
       -moz-transition: width, ease-in, 0.4s;
        -ms-transition: width, ease-in, 0.4s;
         -o-transition: width, ease-in, 0.4s;
            transition: width, ease-in, 0.4s;
}
.header #logo img {
    max-width: 100%;
    height: auto;
}
.header .social {
    float: right;
    margin-top: 19px;
    -webkit-transition: margin-top, ease-in, 0.4s;
       -moz-transition: margin-top, ease-in, 0.4s;
        -ms-transition: margin-top, ease-in, 0.4s;
         -o-transition: margin-top, ease-in, 0.4s;
            transition: margin-top, ease-in, 0.4s;
}
.header .social .icon {
    display: inline-block;
    margin-left: 20px;
    width: 51px;
    height: 51px;
    border-radius:999px;
    -webkit-transition: margin-left, ease-in, 0.4s;
       -moz-transition: margin-left, ease-in, 0.4s;
        -ms-transition: margin-left, ease-in, 0.4s;
         -o-transition: margin-left, ease-in, 0.4s;
            transition: margin-left, ease-in, 0.4s;
}
.header .social .icon.facebook {
    position: relative;
    background:#336699;
}
.header .social .icon.twitter {
    position: relative;
    background:#66cccc;
}

Answer 1

，所以我可能对此问题有一个解释，并且有些代码绝对可以解决。

可能的解释是，缩小的社交媒体图标有时会被围绕大小。当他们收缩时，它可能会计算出26.6像素的宽度，当然，当它必须始终显示为整数像素数时。当它最多可容纳27个像素时，这将最后一个社交媒体偶像击倒了一个新的水平。如果这是正确的，它会闪烁，因为它将继续缩小，计算26个像素，即O.K.价值，它不会下降。但是随后立即达到25.9像素，这再次将其放下。如果这确实是正确的，那么实际上它比我给出的简单解释要复杂一些（父母元素的宽度起作用），但这足以使这个想法跨越。

无论如何，有效的修复程序正在为 div提供宽度，以便有"呼吸空间"，如果您愿意的话，供图标扩展。

这里有一些代码，可以使其空间，但是您需要优化它才能按照您的需求显示。

.header .social {
    ...
    width: 500px;
}

我对解决方案的最初想法是该div的width集，然后将图标浮在其内部。

Answer 2

有点迟到了答案，但是我只是在过渡边距 - 左值时面对这个问题。
该解决方案是设置" 边界间距"值 0