ChromeのBootstrapスティッキーナビバーを使用した1pxのスペース

Question

http://www.mimicmuziek.nlで作業を終了します。私はnavbarでbootstrap .sticky-topクラスを使用しましたが、Chromeを使用するとnavbarの上に1pxの小さなギャップがあり、コンテンツを見ることができます。 Safariを使用しているときには発生しません。これを修正する方法に関するアイデアは高く評価されます！

編集：私はちょうど私のガールフレンドのコンピュータ上でそれを試してみましたが、それは私がnavbarがstickyで、Bootstrap Carouselがnavbarの下にスライドされたときに、それが唯一起こることに気づい

Answer 1

が正常に動作します。これは人々がこの問題をデバッグするのに役立つことを願っています。

Answer 2

UPDATE：https://bugs.chromium.org/p/chromium/issues/detail?id=810352&q=sticky&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

---

だけでなく、ブートストラップ：

私はこれを見つけました。

https://codepen.io/anon/pen/vdgzdb

.heading{ 
 
    background: #ccc; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    margin-top: 10px; 
 
    font-size: 30px; 
 
    padding-left: 10px; 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    top: 0px; 
 
} 
 

 
.content { 
 
    height: 50px; 
 
}

<h1>Animals by Alphabet</h1> 
 

 
<div class="container"> 
 
    <div class="heading">A</div> 
 
    <div class="content">American Buffalo</div> 
 
    <div class="content">Aardvark</div> 
 
    <div class="content">Alligator</div> 
 
    <div class="content">Antelope</div>  
 

 
    <div class="heading">B</div> 
 
    <div class="content">Baboon</div> 
 
    <div class="content">Bat</div> 
 
    <div class="content">Blue Bird</div> 
 
    
 
    <div class="heading">C</div> 
 
    <div class="content">Cat</div> 
 
    <div class="content">Camel</div> 
 
    <div class="content">Chicken</div> 
 
    <div class="content">Chipmunk</div>  
 

 
    <div class="heading">D</div> 
 
    <div>Dog</div> 
 
    <div>Donkey</div> 
 
    <div>Dave</div> 
 
    <div>Duck</div>  
 
</div>

スティッキーED要素が他のdivを下回っているときに再生することができます。

h1要素を削除すると、正常に動作します。

しかし、時には要素があることがあります。 imgタグの下にsticky-ed要素を置くと、1pxのギャップが表示されます。私がimgにある高さを設定すると、それは機能します。

Chromeのようなブラウザに問題があると思います。これにより、iOS上ではwkwebview、iOS/macOSではSafari上で完全に実行されます。また、点滅をサポートするAndroid webviewの1pxギャップ。