12

I'm having a problem with a fixed position element in mobile Chrome. A little gap between the fixed top element and top of the viewport appears when I swipe up and down without reloading the page.

To replicate this bug the easiest way is to try the bootstrap example https://getbootstrap.com/examples/navbar-fixed-top/ in mobile Chrome. Swipe up and down without reloading page and after few tries you should see a gap.

The most common answer on Chrome rendering issue. Fixed position anchor with UL in body does not work for me:

#element {
    -webkit-transform: translateZ(0);
}
Community
  • 1
  • 1
nullgr4vity
  • 309
  • 2
  • 8
  • I am unable to reproduce it in mobile Chrome are you still experiencing this problem? If you are please include the relevant code that will allow us to replicate the issue in the question itself a Stack Snippet would be great. – Hidden Hobbes Jan 04 '17 at 09:40
  • How big is this gap? If it's just about 1 pixel then I believe it is simply a rendering glitch. I was unable to reproduce this error on my own device. – Serg Chernata Jan 20 '17 at 20:42
  • Are you sure you have the latest version of chrome? Which device are you using? – Ajith Gopi Apr 15 '21 at 08:24

2 Answers2

0

Try setting margin-top and padding-top to 0px for the fixed element and the body and html tags

n4m31ess_c0d3r
  • 2,722
  • 5
  • 23
  • 34
Kevin
  • 69
  • 7
0

You have margins set on your div#navbar ul.nav.navbar-nav --- set your margin to 0.

Nicola Reyes
  • 13
  • 4