CSS Transition and Fixed position not working in Safari - css

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>
So as usual this is a Safari problem only. I have tried several things to make this menu animation work to no avail. The menu button doesn't seem to respect the z index and the animation glitches out too. I have tried several suggestions on here and nothing has worked. Using the -webkit- prefix on the classes hasn't done anything. Getting rid of transitions didn't do anything.
I tried this on the menu container
-webkit-transform: translate3d(0px, 0px, 0px);
I tried on the button
transform: translateZ(1000px);
transform-style: preserve-3d;
Nothing solves this bug. On chrome and firefox works perfectly.