Layered CSS elements causing glitchy animation

I am trying to have a smooth transition effect on my navbar on scroll, however the animation has an underlying bug caused by navbar-collapse when that turns to white separately, making the animation look glitchy. I have tried using transition-delay: 1s; on this – and that solves it, but when I press the nav toggle on mobile it takes 1 second to load, which isn’t acceptable.

What is the proper way to fix this? Code below, snippet must be ran in full page view to replicate.

Thanks!

EDIT: To better view the issue, view the device in mobile and then scroll down and scroll up, you can see navbar-collapse behind the nav bar.

const header = document.querySelector("header");


const topbar = document.querySelector(".top-bar");


const navObserverOptions = {
  threshold: 0.1
};

const navObserver = new IntersectionObserver(function(
  entries,
  sectionOneObserver
) {
  entries.forEach(entry => {

    if (!entry.isIntersecting) {

        document.getElementById("navbar").classList.add('fixed-navbar');

    } else {

        document.getElementById("navbar").classList.remove('fixed-navbar');

    }

  });
},
navObserverOptions);

navObserver.observe(topbar);
html {
    font-size: 87.5%;
}

body {
    font-size: 1em;
    line-height: 1.85em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    color: #666666;
    font-weight: 400;
}

a:link,
a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
    color: #666666;
}

header {
    position: absolute !important;
    width: 100%;
    transition: all .5s; /*??*/
    padding: 0 !important;
    margin: 0 !important;
}

.top-bar {
    color: #fff;
    border-bottom: 1px solid rgba(144, 144, 144, 0.25);
}

.navbar {
    position: absolute !important;
    width: 100%;
    transition: all .5s;
}

.navbar-nav>li {
    padding-left: 10px;
    padding-right: 10px;
}

.top-bar a,
.nav-item a {
    text-decoration: none;
    outline: none;
    color: #ffffff;
    opacity: 1;
    font-weight: 600;
    font-size: .85em;
}

.top-bar a:hover,
.nav-item a:hover {
    opacity: 0.5;
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}

.fixed-navbar {
    background: white;
    top: 0;
    position: fixed !important;
    animation-name: fixedAnim;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    -webkit-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
    /*-1px 6px 13px 0px rgba(0, 0, 0, 0.44);*/
}

.fixed-navbar a {
    color: #000;
}

.navbar.fixed-navbar .navbar-collapse {
    /*transition-delay: 1s;*/
    background: #fff !important;
}

.navbar.fixed-navbar .navbar-toggler span {
    background: #000 !important;
}

.navbar.fixed-navbar .logo-dark {
    display: inline-block !important;
}

.navbar.fixed-navbar .logo-default {
    display: none !important;
}


@keyframes fixedAnim {
    from {
        top: -50px;
    }

    to {
        top: 0;
    }
}



/* Define the shape and color of the hamburger lines */
.navbar-toggler span {
    display: block;
    background-color: #4f4f4f;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}


/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}

/**
 * Animate collapse into X.
 */

/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}

/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}

/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button    */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
}


/**
 * Animate collapse open into hamburger menu
 */

/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg);
}

/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
    opacity: 1;
}

/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg);
}

.navbar .navbar-toggler span {
    background: white;
}

.hero {
    width: 100%;
    height: 90vh;
    background: url('https://www.fillmurray.com/1024/768');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha512-XKa9Hemdy1Ui3KSGgJdgMyYlUg1gM+QhL6cnlyTe2qzMCYm4nAZ1PsVerQzTTXzonUR+dmswHqgJPuwCq1MaAg==" crossorigin="anonymous"></script>
  
    <header>

        <div class="top-bar">
            <div class="row">

                <div class="col-md-6 my-1">
                    <ul class="list-inline mb-0 ml-lg-5 ml-md-4 ml-3">
                        <li class="list-inline-item"><a href="#"><i class="fa fa-phone"></i> phone here</a></li>
                        <li class="list-inline-item ml-2"><a href="#"><a href="#"><i class="fa fa-envelope"></i> email goes here</a></li>
                    </ul>
                </div>
                <div class="col-md-6 d-none d-md-block my-1">
                    <ul class="list-inline float-right mb-0 mr-lg-5 mr-md-4">
                        <li class="list-inline-item"><a href="#">Client Login <i class="fa fa-sign-in-alt"></i></a></li>
                    </ul>
                </div>

            </div>
        </div>

        <nav id="navbar" class="navbar navbar-expand-sm">
            <a class="navbar-brand ml-lg-5 ml-md-4 ml-1" href="#">
                <img src="http://via.placeholder.com/32x55" alt="" width="32" height="55" class="d-inline-block align-top logo-default ml-lg-4 ml-md-4 ml-0" id="navlogo">
                <img src="http://via.placeholder.com/32x55" alt="" width="32" height="55" class="d-none align-top logo-dark ml-lg-4 ml-md-4 ml-0" id="navlogo">
            </a>
            <button class="navbar-toggler collapsed border-0" id="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
                <span> </span>
                <span> </span>
                <span> </span>
            </button>
            <div class="navbar-collapse collapse text-right" id="navbarsExample04">
                <ul class="navbar-nav ml-auto mr-3 text-uppercase">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">one</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">two</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">three</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">four</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">five</a>
                    </li>
                    
                </ul>

            </div>
        </nav>

    </header>

    <main role="main">

        <section class="hero">
            <div class="container-fluid">

            </div>
        </section>


        <div class="background-white">
            <h1>Navbar example</h1>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p><p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
            <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>

        </div>
    </main>

Answer

I don’t know if it’s the “proper way” to fix it but you could make navbar-collapse a pseudo element

.navbar.fixed-navbar .navbar-collapse::after {
/*transition-delay: 1s;*/
background: #fff !important;
}

and that would get rid of it. Not sure how proper this is though, although it should fix it.

Edit: Also looking at it, you can delete the whole

background: #fff !important;

You don’t need it, that’s what causing your problem.

Leave a Reply

Your email address will not be published. Required fields are marked *