I'm finishing up work on http://www.mimicmuziek.nl. I used the bootstrap .sticky-top class on the navbar, however when I use Chrome there appears to be a tiny 1px gap above the navbar, that I can see the content through. Doesn't happen when using Safari. Any ideas on how to fix this would be appreciated!
Edit: I just tried it on my girlfriend's computer and it works fine there
UPDATE:
I found this: https://bugs.chromium.org/p/chromium/issues/detail?id=810352&q=sticky&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
Not only Bootstrap.
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>
It can be reproduced when the sticky-ed element is below other divs.
When I delete the h1
element, it performs well.
But you know, sometimes an element has to be there. I put a sticky-ed element below an img
tag, the 1px gap appears. When I set the img
a certain height, it works.
I think there is something wrong with Chrome-like browsers. Due to it performs perfectly on wkwebview on iOS and Safari on iOS/macOS. And 1px gap on Android webview which supports blink.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With