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:
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.
I noticed that it only happens when the navbar is sticky and the Bootstrap Carousel is sliding underneath the navbar. Hope this will help people debugging this issues.