CSS transition flicker on Safari

I have a header at the top of my page of my portfolio website (obviously) that is transparent when the top of the screen is less than 50px. Once the top becomes greater than 50px, a div with a black background translates in from the left on the x-axis via adding a new class to the element.

On Chrome, the transition works perfectly smooth. The animation on Safari, has this "flicker", and it's only the first time the element transitions in.

I tried using dev tools to the best of my ability on Safari in attempt to diagnose, and everything looks fine. I have also have added -webkit-transform-style: preserve-3d;, -webkit-backface-visibility: hidden;, -webkit-transform: translate3d(0,0,0); and none of these properties resolve the issue.

I'm so lost. Thank you for checking this out and attempting to help me!

(function () {
    "use strict";
    var logo = document.querySelector("#logo-wrapper"),
        background = document.querySelector(".header-background"),
        scrollAnim = document.querySelector("#scroll-down-animation-wrapper"),
        scrollVisible = true,
        isSafari = /constructor/i.test(window.HTMLElement) || (function (p) {
            return p.toString() === "[object SafariRemoteNotification]";
        })(!window['safari'] || safari.pushNotification);


    function minimizeHeader() {
        logo.classList.remove("minimize");
        background.classList.remove("header-background-active");
    }

    function expandHeader() {
        logo.classList.add("minimize");
        background.classList.add("header-background-active");
    }

    function checkScroll() {
        if (scrollVisible) {
            scrollAnim.classList.add("hide-scroll-animation");
            scrollVisible = false;
        } else {
            return;
        }
    }

    function checkPos(e) {
        if (e > 50) {
            if (logo.classList.length === 0) {
                expandHeader();
                checkScroll();
            }
        } else {
            if (logo.classList.length === 1) {
                minimizeHeader();
            }
        }
    }

    function addEventChrome() {
        window.addEventListener("scroll", function (e) {
            var event = e;
            window.requestAnimationFrame(function () {
                checkPos(event.path[1].scrollY);
            });
        });
    }
    
    /* Safari event needs to use a different path to detect scrollY*/
    
    function addEventSafari() {
        window.addEventListener("scroll", function (e) {
            var event = e;
            window.requestAnimationFrame(function () {
                checkPos(event.target.defaultView.scrollY);
            });
        });
    }
    
    if (isSafari) {
        addEventSafari();
    } else {
        addEventChrome();
    }
}());

#header {
    will-change: transform;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 10vh;
    min-height: 100px;
    padding: 1.5% 3.5%;
    z-index: 5;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.header-background {
    will-change: transform;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 7vh;
    background-color: #121217;
    opacity: 0.97;
    -webkit-transform: 
    translate(-100%,0);
    transform: 
    translate(-100%,0);
    z-index: 4;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.header-background-active {
    will-change: transform;
    -webkit-transform: 
    translate(0,0);
    transform: 
    translate(0,0);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

    <header id="header">
        <a id="logo-wrapper">
            <img class="logo" src="d_logo">
        </a>
    </header>
    <div class="header-background"></div>