Scroll on Bootstrap navbar not working in Safari on iOS

Question

I have a responsive mobile site which works fine on Chrome and IE. However in Safari it doesn't let you scroll down a page.

Bootstrap has a max-height of 340px which I have overridden and set it to a height of 100vh, which isn't working in Safari as well, i attached an overflow to the pages.

<nav class="navbar navbar-default navbar-fixed-top visible-xs menu-open">
  <div class="container-fluid menu">
    <div class="collapse navbar-collapse" id="navbar-collapse-menu" data-class="menu" data-text="Menu">
      //blah blah content opens
    </div>
  </div>
</nav>

/* Bootstrap CSS */
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 340px;
}

/* My CSS */
.menu-open>.container-fluid {
  height: 100vh !important;
}

.navbar-default>.menu.container-fluid {
  overflow-x: scroll;
  overflow-y: scroll;
}

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: none !important;
}

I tried adding the following

-webkit-overflow-scrolling: touch;

It still doesn't scroll my page, this is only happening in Safari. What am I doing wrong?

yup i used that @Grumpy ,exactly that, i also tried height=device-height but nothing happens — marry, Sep 20 '19 at 11:33

score 0 · Answer 1 · answered Sep 20 '19 at 12:15

okay so i dont know why but i changed the css to the following and it worked,so just incase someone else has the same issue this is all i did

.navbar-default > .menu.container-fluid {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

Scroll on Bootstrap navbar not working in Safari on iOS

1 Answers1