iPhone用Chromeで固定ナビバーがブラウザ上部から分離されています

ブーツストラップ固定式ナビゲーションバー（example here）のウェブサイトがあり、iPhoneでChromeを使用すると、ナビゲーションバーがすばやくスクロールするときにわずか数ピクセルだけ画面に表示されます。これは、ブートストラップナビゲーションバーの例のページから、次のスクリーンショットに示されている：iPhone用Chromeで固定ナビバーがブラウザ上部から分離されています

これはiPhone上ではなく、私がテストしたiPadやすべてのMac/PC上のChromeで起こります。また、私が見つけることができる固定のnavbarを持つすべてのウェブサイトで起こります。私が考えることができる唯一のことは、Navbarの背景色をブラウザの上から上に上げて、Navbarが最終的にプルダウンされたときに画面から完全に分離しないようにすることです。しかし、それはまだnavbarのコンテンツをプルダウンしたままにして、確かに汚い修正のように思えます。

他の誰かがこの問題にぶつかりましたが、利用可能な既知の修正がありますか？

出典

2016-02-02 MPLewis

がここに気づい同じ問題を持ちます。私はこれをChromeのバグとして置くことができてうれしく思います。これは、リフレッシュするために「プルダウン」した後にのみ発生します。この後は本当に混乱しますが、実際には非常にゆっくりとアクションを実行すると、これは起こりません。 –

は、 'padding-top：20px;を追加しようとしました。 top：-20px; ' - 助けてくれない – mymlyn

JavaScriptはそれに対処できません。すべてのスクロールイベント/ウィンドウのサイズ変更イベント、運は上に移動しようとしました。ビューポート/ウィジェットが歪んでいるようです。また、ポートレートから風景に時折切り替えて再現することもできました。 – codybuell

私はパディングトップを設定
、このギャップをカバーするためにトリッキーな方法を使用：NAVを100pxにして、マージントップ：それが再び起こったとき-100px、
ので、ギャップがで満たされるでしょうパディングトップ。

これまでのところうまくいきます。これがあなたにも役立つことを願っています。

出典

2016-04-18 09:30:00

-1

約1週間前に同じ問題が発生しました。私はBootstrapを使っていて、iPhoneのGoogle Chromeでこの問題を発見しました。固定されたトップナビゲーションバーのほかにすべてのコンテンツの周りに<div class="wrapper"></div>を入れてみてください。完了したら、次のCSSでページのスタイルを設定します。

body, html { 
    width: 100vw; 
    height: 100%; 
    overflow-x: hidden !important; 
    display: block; 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-color: white; 
    overflow-x: hidden !important; 
    width: 100vw; 
    display: block; 
} 

html { 
    overflow-x: hidden !important; 
    width: 100vw; 
    display: block; 
} 

.wrapper { 
    -webkit-overflow-scrolling: touch; 
    overflow-y: scroll; 
    overflow-x: hidden !important; 
    height: 100vh; 
    width: 100vw; 
} 

.navbar { 
    height: 70px; 
    width: 100%; 
    position: absolute; 
    background-color: indigo; 
}

EDIT：これは問題なくなりました。ああ、助かった！

出典

2016-05-26 19:36:06

あなたの答えにある 'position：absolute'は' position：fixed'と全く違った動作をします。それが望ましい。私が知ることから、必要な固定位置を維持しながら、私のポストと別の答えに記述されたハック以外のこの問題を解決する方法はありません。 – MPLewis

OK、私は<body>クロムの内容全体の前にスペースがあるので、解決策は最後に見つかりましたか？私は、文書の先頭にある<!DOCTYPE html>タグの前に空白がありました。' 'というシンボルがすべて削除されました。

信じられませんでした。

出典

2016-06-07 14:16:10

これは解決策ではなく、要素の上に白いバーを追加することによって、ピーキングからコンテンツを防止することにより、状況が改善されます：

.fixed-header:after { 
    content: ''; 
    position: fixed; 
    top: -20px; 
    height: 20px; 
    width: 100%; 
    background-color: #fff; // whatever your nav background color is 
}

出典

2016-07-20 19:54:38 Lane

iPhone用Chromeで固定ナビバーがブラウザ上部から分離されています

答えて

関連する問題