Element shaking on Hover/Class Toggle only in Safari - html

Question

I have a sidebar menu with logo toggle button which toggles the class "toggled" and on large screens also appears on hover.
The sidebar is left: 100% and on toggle/hover left: 0;
On all browsers except safari it works fine. Only on safari the logo button wiggles/shakes when letting the navigation appear.
Here a short overview of the code:
.main-navigation {
//Structure
display: inline-block;
width: 160px;
transition: all 250ms ease-in;
height: 100vh;
z-index: 100;
position: fixed;
left: -100%;
background-color: $color__primary;
&.toggled {
left: 0;
}
.menu-toggle {
margin-left: auto;
align-self: flex-end;
display: inline-block;
position: fixed;
background: none;
border: none;
border-radius: 0;
left: 20px;
top: 25px;
width: auto;
height: auto;
padding: 0;
z-index: 110;
&:focus, &:active {
outline: none;
}
}
}
And on large screens i just add the hover:
.main-navigation{
&:hover {
left: 0;
}
}
You can see it live under https://rocket.creos.agency/
I hope im just overlooking something small.
Thanks for the help!

Answer 1

In order to fix your problem you need to move your 'logo' from the nav element. If it is inside, like you have it's trying too animate all elements inside nav.
Here is your logic with simple code (logo is inside nav):
body {
margin: 0;
padding: 0;
}
nav {
position: fixed;
height: 100vh;
width: 160px;
left: -160px;
background-color: tomato;
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
nav:hover {
left: 0;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
.content {
margin-top: 50px;
}
<nav>
<button>
Hover me
</button>
<div class='content'>
<ul>
<li>
one
</li>
<li>
two
</li>
</ul>
</div>
</nav>
And this is when 'logo' is outside the nav:
(() => {
const btn = document.getElementById('animateNav');
const nav = document.getElementById('navigation');
const content = document.getElementById('content');
btn.addEventListener('mouseover', () => {
nav.classList.add("animate");
});
nav.addEventListener('mouseout', () => {
nav.classList.remove("animate");
});
nav.addEventListener('mouseover', () => {
nav.classList.add("animate");
});
content.addEventListener('mouseover', () => {
nav.classList.add("animate");
});
})();
body {
margin: 0;
padding: 0;
}
nav {
position: fixed;
height: 100vh;
width: 160px;
left: -160px;
background-color: tomato;
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
nav.animate {
left: 0;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
#content {
margin-top: 50px;
}
<nav id='navigation'>
<div id='content'>
<ul>
<li>
one
</li>
<li>
two
</li>
</ul>
</div>
</nav>
<button id='animateNav'>
Hover me
</button>
All difference is in second example that you need to toggle a class for nav using JavaScript. I provided not efficient logic to toggle a class, but I just wanted to present to you working solution.
P.S. don't use <a> tag inside of <button> tag