CODEWITHSUNDEEP
cssgoogle-chrometwitter-bootstrap-3
nullgr4vity
nullgr4vity

Reputation: 319

fixed position in mobile chrome

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);
}

Upvotes: 13

Views: 2275

Answers (5)

Vrijesh Rathod
Vrijesh Rathod

Reputation: 13

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;
  ...
  }

Upvotes: 1

user17311472
user17311472

Reputation:

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;
}

Upvotes: 0

Karan Karpe
Karan Karpe

Reputation: 56

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 };

Upvotes: 1

Nicola Reyes
Nicola Reyes

Reputation: 13

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

Upvotes: 0

Kevin
Kevin

Reputation: 79

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

Upvotes: 0

Related Questions