Question

我正在为我的博客制作一个新主题，我的标题有问题。看，标题在顶部有一个固定的位置，就像导航栏一样，当用户向下滚动时它会缩小。但是，在某些浏览器（主要是Chrome，特别是用于Windows）上，标题上的Twitter图标有一个奇怪的闪烁行为，下降到下一行的十分之一秒左右。

在使用转换时，我看到很多关于Chrome中闪烁错误的事情，但没有看起来像这样的事情（此外，修复程序不适用于我的情况）。这是图标边缘和标题高度的简单过渡。

有没有人见过类似的东西？

非常感谢！

编辑：在小提琴中重新创建它。问题仍然存在：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;
}

我对解决方案的初步想法是设置此width的{{1}}，然后将图标浮动到其中。

Answer 2

有点迟到的答案，但我在转换左边距值时遇到了这个问题。
解决方案是将“ border-spacing ”值设置为 0

CSS转换期间的闪烁错误

2 个答案: