13

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
  • 319
  • 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

5 Answers5

1

Check if your body and html do not have any margin or padding. Also inspect to check if any of the div have any negative margin or paddings

body, html { margin: 0; padding: 0 };
Andret2344
  • 653
  • 1
  • 12
  • 33
Karan Karpe
  • 56
  • 4
1

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.

If you want to change it, you can just do this:

 body {
  margin: 0px;
  padding: 0px;
  ...
  }
Vrijesh Rathod
  • 13
  • 3
0

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

n4m31ess_c0d3r
  • 3,028
  • 5
  • 26
  • 35
Kevin
  • 79
  • 7
0

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

Nicola Reyes
  • 13
  • 5
0

see if setting your margin and padding are set to auto, in this case, the margin should automatically adjust accordingly.

body, HTML
{
margin:auto;
padding:auto;
}