0

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

我在使用过渡时看到了很多关于 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;
}
4

2 回答 2

1

所以我对这个问题有一个可能的解释，以及一些可以解决它的代码。

可能的解释是，缩小的社交媒体图标的大小有时会被四舍五入。当它们缩小时，它可能会计算出 26.6 像素的宽度，当然它必须始终显示为整数个像素。当它四舍五入到 27 像素时，这会将最后一个社交媒体图标提升到一个新的水平。如果这是正确的，它会闪烁，因为它会继续缩小，计算 26 像素，这是一个 OK 值，它不会下降。但随后它立即变为 25.9 像素，再次下降。如果这确实是正确的，它实际上会比我给出的这个简单解释要复杂一些（父元素的宽度起作用），但这足以让这个想法得到理解。

无论如何，一个有效的解决方法是给div图标一个宽度，这样如果你愿意的话，就有“喘息的空间”来扩展图标。

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

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

我对解决方案的最初想法是设置widththis div，然后将图标浮动到其中的右侧。

于 2012-10-24T11:40:47.003 回答
1

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

于 2013-12-05T15:20:13.503 回答