Сила оплавления Safari Mobile не работает

Question

Я программировал сайт с нуля. При тестировании поведения в разных браузерах я обнаружил, что моя отзывчивая мобильная навигация имела некоторые ошибки в Safari.
После длительного поиска и тестирования я нашел версию, которая работает в Safari на Mac, но, к сожалению, на iPhone она не работает.

Я получил медиа-запрос, который устанавливает для навигации значение «display: none;» с javascript он должен быть установлен для отображения блока при нажатии на nav-mobile. Я обнаружил, что встроенный CSS обновляется, но браузер не перекомпоновывается.

Я пробовал разные вещи, две из которых все еще находятся в коде, так как они были необходимы для работы на Mac.
Я попытался заставить его переформатировать с анимацией, которая бесконечно изменяет непрозрачность (я также попробовал ширину), а также добавив элемент стиля в конце тега body. Я также попробовал другой ответ на подобный вопрос. (Установка 'display: none;' для элемента и выполнение 'element.offsetHeight',

function menuClick(x) {
  x.classList.toggle("change");
  let nav = document.getElementById("navigation");
  if (nav.style.display == "block") {
    nav.style.display = "none";
  } else {
    nav.style.display = "block";
  }
  document.getElementById("container-header").classList.toggle("container-headeropen");
  document.getElementById("branding").classList.toggle("brandingopen");
  let style = document.createElement("style");
  style.id = "deleteThis";
  document.body.appendChild(style);
  document.body.removeChild(document.getElementById("deleteThis"));
  nav.parentElement.style.display = 'none';
  nav.parentElement.style.display = 'block';
}

.container-header {
  height: 6rem;
  background-color: #fff;
  width: 100%;
  z-index: 1;
}

.branding {
  height: 100%;
  float: left;
}

.branding img {
  height: 80%;
  float: left;
  padding: 5% 20px;
}

.nav-mobile {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 0 0 20px;
  display: none;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  background-color: black;
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: black;
}

nav {
  float: right;
  padding-right: 30px;
  height: 100%;
}

nav ul {
  width: 100%;
  max-width: 1140px;
  margin: auto;
  padding: 0;
}

nav a {
  display: inline-block;
  color: #000;
  text-decoration: none;
  font-size: 110%;
}

nav a:hover:after,
.current:after {
  content: '';
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 12px;
  border-width: 0 0 1px;
  border-style: solid;
}

nav ul li ul li a:hover:after {
  border: none;
}

nav ul li {
  position: relative;
  float: left;
  list-style: none;
  color: #fff;
  transition: 0.5s;
}

nav ul li a {
  padding: 2.5rem 15px 20px;
}

nav ul li ul li a {
  padding: 0.55rem 18px;
}

nav ul li a.current {
  color: #420c0c;
}

nav ul li ul {
  width: 150%;
  position: absolute;
  top: 100%;
  background-color: #420c0c;
  z-index: 4;
  transform: translateX(100vw);
  transition: all 0.3s ease-out;
}

nav ul li ul li {
  width: 100%;
  border-bottom: 1px solid black;
}

nav ul li ul li a {
  font-size: 100%;
  width: 100%;
  box-sizing: border-box;
  color: white;
}

nav ul li ul li a:hover {
  border: 1px solid black;
  transform: scale(1);
  color: #420c0c;
  font-weight: bold;
  background-color: white;
}

@media only screen and (max-width: 764px) {
  .nav-mobile {
    cursor: pointer;
    display: inline-block;
    z-index: 3 !important;
  }
  nav a:hover:after,
  .current:after {
    width: 0 !important;
  }
  .container-header {
    z-index: 1;
    position: relative;
  }
  .branding {
    float: right;
    max-width: 80%;
  }
  .brandingopen img {
    width: auto;
    height: 80%;
  }
  nav {
    width: 250px;
    padding-top: 50px;
    float: left;
    display: none;
    position: relative;
    z-index: 2;
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: bugfix 1s infinte;
  }
  @keyframes bugfix {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  nav>ul {
    display: block;
    position: relative;
    animation: bugfix 1s infinte;
    background-color: #420c0c;
  }
  nav ul li {
    float: none;
    display: block;
    position: relative;
    animation: bugfix 1s infinte;
  }
  nav ul li a {
    position: relative;
    animation: bugfix 1s infinte;
    color: white;
    width: 100%;
    box-sizing: border-box;
    border-top: solid 1px white;
  }
  nav ul li a.current {
    color: white;
    background-color: #210606;
  }
  .container-headeropen {
    display: block;
    width: 250px;
    position: fixed;
    z-index: 2;
    opacity: 0.8;
    background-color: #420c0c;
    height: 100vh;
  }
  .brandingopen {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 250px !important;
    height: auto !important;
  }
}

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <title>Small Sample</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" async href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Cinzel|Cormorant+Garamond" async rel="stylesheet">
</head>

<body>
  <div class="container clearfix">
    <div id="container-header" class="container-header clearfix">
      <div class="branding">
        <img id="branding" src="http://lorempixel.com/400/200" alt="">
      </div>
      <div class="nav-mobile" onclick="menuClick(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
      <nav id="navigation">
        <ul>
          <li><a class="current" href="index.html">Home</a></li>
          <li><a href="ueber-mich.html">Über mich</a></li>
          <li><a href="portfolio.html">Portfolio</a>
          </li>
          <li><a href="angebot.html">Angebot</a></li>
          <li><a href="faq.html">FAQ</a></li>
        </ul>
      </nav>
    </div>
  </div>
</body>

</html>