Menu
I have a website with a bootstrap fixed-to-top navigation bar (example here), and noticed that, using Chrome on an iPhone, the navbar separates from the top of the screen by just a few pixels when scrolling quickly. This is shown in the following screenshot, from the bootstrap navbar example page:
This only happens on Chrome on an iPhone, and not on an iPad or any Mac/PC I've tested. It also happens on every website with a fixed navbar that I could find. The only thing I can think of is to extend the background color of the navbar up above the top of the browser so that, when the navbar is eventually pulled down, it doesn't fully separate from the screen. However, that still leaves the content of the navbar pulled down, and certainly seems like a dirty fix.
Has anyone else run into this issue, and is there any sort of known fix available?
350
I used a tricky way to cover this gap,
I set padding-top:100px to the nav, and then margin-top:-100px,
so when it happened again, the gap would be filled by the padding-top.
It works fine so far, and hope this can help you, too.
128
OK, so I've had the same problem, of having a space before the entire contents of <body> in chrome, the solution found in the end? I had a space ' ' symbol at the start of the doc, before the <!DOCTYPE html> tag, removing it fixed everything.
Could not believe it.
44
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
