Scrolling past top with fixed navbar behaving differently across different browsers

debugcn Published at Dev

McVenco

I'm encountering an issue with a fixed navbar in twitter-bootstrap-3 that I can't quite find an explanation or solution for.

When I scroll past the top of the page there is different behaviour in different browsers:

In Chrome (MacOS), the whole content scrolls down, like this:

In Safari (also Mac), the navbar stays fixed on top, and the background appears below it:

Ideally, I would prefer the behaviour as it is in Chrome. I have tried numerous approaches with css using overflow, position, but I can't figure it out. Can I correct this behaviour with CSS (or perhaps Javascript/jQuery?)

Here's the bare bones of my code (the !importants are just here to override Bootstrap styling):

body {
    background-color: #eee !important;
    padding-top: 54px !important;
}

.navbar {
    min-height: 54px !important;
    border-bottom: 2px solid orange !important;
    margin-bottom: 0 !important;
}

.navbar-default {
    background: #fff !important;
    .navbar-brand {
        color: #000 !important;
    }
}

.usp-bar {
    background-color: orange;
    color: #fff;
    height: 30px;
    width: 100%;
}

.content {
  height: 800px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>

  <div id="app">

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    Navbar
                </a>
            </div>
        </div>
    </nav>

    <div class="usp-bar">
      orange bar
    </div>

    <div class="content">
      Content
    </div>

  </div>
</body>

Tom

Hacks

See puresamari's gist "overscroll background-color on ios" that places a fixed container in the negative space above the page. Doesn't work in Safari 11 or mobile Safari.

Overscroll-Behavior

Chrome 63 introduced the overscroll-behavior property that lets you disable scroll chaining or overscrolling altogether. However, still not supported in Safari ☹

Final Advice

The most reliable method is setting a background color on html and another on body, i.e. http://peter.coffee/htmls-background-color.

It's not yet possible to control how browsers overscroll, so instead set the correct colors and leave negative space at the top of the page for the fixed header.

Interestingly that's what StackOverflow does:

.top-bar {
    height: 50px;
}

.top-bar._fixed {
    position: fixed;
    min-width: auto;
}

.top-bar ~ .container, .top-bar ~ #announcement-banner {
    margin-top: 50px;
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-08-8

Comments

0 comments

From Dev

Related Related

Article

Scrolling past top with fixed navbar behaving differently across different browsers

Scrolling past top with fixed navbar behaving differently across different browsers

Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

Bootstrap with navbar fixed top and Bootstro

Smooth scrolling across browsers?

Bootstrap navbar not fixed top for mobile

Bootstrap 3 navbar-fixed-top after scroll past fullscreen hero unit

JavaScript delete objects behaves differently in different browsers

JQuery Position:Fixed 'NAVBAR' by scrolling the page

How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

Top positioning in different browsers

How to prevent different browsers rendering fonts differently?

Code Behaving Differently On Different IDE

Javascript smooth scrolling with fixed navbar offset

Website Content disappearing behind fixed navbar with margin-top when scrolling

scrolling an element on top of a fixed element

how to make the navbar fixed to top

Why regex in java is behaving differently for different example?

Are cookies persistent across different browsers?

Bootstrap with navbar fixed top and Bootstro

Navbar stick to top of screen when scrolling past

modulus behaving differently on different servers? (with / without spaces)

fixed menu that is fixed after scrolling past a div

How can I set a div to position:fixed, when scrolling it to the browsers top?

bootstrap navbar fixed top and body padding top

change navbar-fixed-top color when scrolling

navbar-fixed-top sticking to top

How to make a header fixed after scrolling past it

Fix Bootstrap Navbar to top on scrolling

jQuery position().top behaving the same as offset().top inside fixed parent

The dl tag is shown in different browsers differently why?