Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

1px of space using Bootstrap sticky navbar in Chrome

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

like image 930
syberen Avatar asked Nov 19 '17 19:11

syberen


1 Answers

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.

like image 151
Jason.Pu Avatar answered Nov 11 '22 10:11

Jason.Pu