Fixed navigation when jumping -webkit-overflow-scrolling: touch;

Question

Fixed navigation when jumping -webkit-overflow-scrolling: touch;

This only happens in Safari on IOS

I applied

body {
    font-family: helvetica, verdana, sans-serif;
    background: #fff;
    overflow: auto;
    height: 100%;
    overflow-y: scroll; /* I added this */
    -webkit-overflow-scrolling: touch; /* and also this */
}

This is because I wanted smooth scrolling on mobile (Safari on IOS). But after that I introduced a new error, now my navigation doesn't fix on scrolling. It jumps and updates its location after it stops scrolling.

Here's the css for navigation

.nav-bar {
    background-color: #ff0000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 51px;
    z-index: 1030;
    max-height: 51px;
}

.nav-container {
    margin: 0 auto;
    height: 51px;
    max-width: 1170px;
    width: 100%;
}

Here is the html

<body class="home">

    <div class="nav-bar">

        <div class="nav-container">

        </div>

    </div>

    <div class="content">
        <p>content here</p>
    </div>

</body>

+3

html css ios webkit

arkhamDev 07 Aug At 4:07 am

source to share

No one has answered this question yet

Check out similar questions:

91

Div height is 100% high and expands to fit the content

46

Unable to display HTML string

8

Fixed position elements move when the body is overflowing

3

CSS overflow issues with fixed position divs

2

Why is the position of the fixed element in chrome influencing the scrollbar of an absolute element's position?

1

Background image disappears when scrolling in Chrome

0

2 Fixed navigation bars of browser width and height

0

Div Overflow, Scroll only works there until the div is removed and triggers the offset of that overflow div's offsetheight

0

fix div to top window allowing horizontal scrolling to overflow on window resize

0

Scrolling content with fixed navigation

Fixed navigation when jumping -webkit-overflow-scrolling: touch;

More articles: