Элемент качается на Hover / Class Toggle только в Safari

Question

У меня есть боковое меню с кнопкой переключения логотипов, которая переключает класс «переключается» и на больших экранах также появляется при наведении курсора. Боковая панель слева: 100%, а при переключении / зависании влево: 0; На всех браузерах, кроме сафари, работает нормально. Только в сафари кнопка логотипа покачивается / дрожит при отображении навигации.

Вот краткий обзор кода:

.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;
    }
}
}

А на больших экранах я просто добавляю наведение:

.main-navigation{
    &:hover {
        left: 0;
    }
}

Вы можете увидеть его вживую под https://rocket.creos.agency/

Надеюсь, я просто пропускаю что-то маленькое.

Спасибо за помощь!

Answer 1

Чтобы решить вашу проблему, вам нужно переместить «логотип» из элемента nav. Если он внутри, как у вас, он пытается слишком оживить все элементы внутри nav.

Вот ваша логика с простым кодом (логотип внутри 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>

И это когда «логотип» находится за пределами 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>

Вся разница во втором примере: вам нужно переключить класс для nav с помощью JavaScript. Я предоставил неэффективную логику для переключения класса, но я просто хотел представить вам рабочее решение.

P.S. не используйте <a> тег внутри <button> тега