CSS Переход и Фиксированное положение не работают в Safari

Question

        //Menu Functionality
        var menuButton = document.getElementById("menu-button");
    
        menuButton.addEventListener("click",openNav);
 
        var mainNav = document.getElementById("main-nav");
        var btns = mainNav.getElementsByClassName("nav-link");
        
        for (var i=0; i < btns.length; i++)
            {
                btns[i].addEventListener("click", function() {
                    openNav();
                    var current = document.getElementsByClassName("active");
                    current[0].className = current[0].className.replace(" active", "");
                    this.className += " active";
                }
                );
            }

        
            
        function openNav() {
            var mainNav = document.getElementById("main-nav");
            var menuButton = document.getElementById("menu-button");
            mainNav.classList.toggle("open-nav");
            if(menuButton.style.transform == ""){
                menuButton.style.webkitTransform = "rotateY(180deg)";
            }else {
                menuButton.style.webkitTransform = "";
            }

        }

body {
    font-family: "BrownPro",sans-serif;
    font-size: 1.5em;
}
h2 {
    font-weight: bold;
}
a {
    color: #5a65ba;
}
.jumbotron-fluid
{
    background-color: #292055;
    
    

}
#jumbotron-video {
    width: 100%;
    
}
video {
    max-width: 100%;
}
#main-nav {
    position: fixed;
    height: 100%;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 1;
    top: 0;
    width: 60%;
    overflow-x: hidden;
    transition:left 0.5s;
    padding-top: 60px;
    background-image: linear-gradient(100deg, #292055 calc(80% - 10%), transparent 0px);
  
}
nav a {
    margin: 20px;
}
nav a:hover {
    color: white;

}

.close-nav {
    left: -60%;
}
.open-nav {
    left: 0%;
}

#menu-button {
    position: fixed;
    margin-left: 2%;
    max-width: 8%;
    font-size: 2em;
    top: 6%;
    z-index: 2;
    color: #ec008c;
    cursor: pointer;
    opacity: 75%;
    transition: transform .5s;
    
    
}


.active {
    color: white;
    /*background-color: #5a65ba;*/
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <div class="jumbotron-fluid">
                <img id="menu-button" src="http://www.posible.strangelandcreative.com/img/menu%20button.png" alt="menu-button"/>
        <video id="jumbotron-video" muted  loop>
            <source src="https://player.vimeo.com/external/437237782.hd.mp4?s=19c3a456176f98a3e348659b2b90b230391dd3e2&profile_id=175" type="video/mp4">
        </video>
        <nav id="main-nav" class="close-nav justify-content-center navigation">
            <a class="nav-link active text-align-center" href="#mision_id">MISIÓN</a>
            <a class="nav-link" href="#eventos_id">EVENTOS</a>
            <a class="nav-link" href="#aprende_id">APRENDE</a>
            <a class="nav-link " href="#recursos_id">RECURSOS</a>     
            <a class="nav-link" href="#galeria_id">GALERÍA</a>
            <a class="nav-link" href="#contact_id">CONTÁCTANOS</a>
        </nav>


    </div>

Так что, как обычно, это проблема только Safari. Я пробовал несколько способов заставить эту анимацию меню работать безрезультатно. Кнопка меню, похоже, не учитывает индекс z, и анимация тоже глючит. Я попробовал несколько предложений здесь, но ничего не помогло. Использование префикса -webkit- для классов ничего не дало. Избавление от переходов ничего не дало.

Я пробовал это в контейнере меню

-webkit-transform: translate3d(0px, 0px, 0px);

Пробовал на кнопке

transform: translateZ(1000px);
transform-style: preserve-3d;

Ничего не решает эту ошибку . На chrome и firefox работает отлично.