css - CSS 转换期间的闪烁错误

Question

我目前正在为我的博客制作一个新主题，但标题有问题。看，标题在顶部有一个固定位置，就像导航栏一样，当用户向下滚动时它会缩小。但是，在某些浏览器(主要是 Chrome，尤其是 Windows)上，页眉上的 Twitter 图标有一种奇怪的闪烁行为，在 1/10 秒左右的时间内会下降到下一行。

我在 Chrome 中看到过很多关于使用过渡时闪烁错误的事情，但没有一个看起来像这样(而且，这些修复不适用于我的情况)。这是图标边距和标题高度的简单过渡。

有人见过类似的东西吗？

非常感谢!

编辑:在 fiddle 中重新创建它。问题依然存在: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.值(value)，它不会下降。但随后它立即变为 25.9 像素，再次下降。如果这确实是正确的，那么它实际上比我给出的这个简单解释要复杂一些(父元素的宽度开始起作用)，但这足以理解这个想法。

无论如何，一个有效的修复方法是为包含图标的 div 提供一个宽度，这样就可以为图标扩展提供“喘息空间”。

下面是一些为其提供空间的代码，但您需要对其进行优化以使其按您希望的方式显示。

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

我最初的解决方案想法是设置此 div 的 width，然后将图标 float 到其中的右侧。