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;
}

私の最初の解決策のアイデアはwidth、 thisのセットであり、divその中でアイコンを右にフロートさせます。

于 2012-10-24T11:40:47.003 に答える
1

答えが少し遅れましたが、margin-leftの値を移行するときにこの問題に直面していました。
解決策は、「border-spacing」の値を0に設定することです

于 2013-12-05T15:20:13.503 に答える