Safari Mobile的回流力不起作用

Question

我一直在从头开始编程一个网站。在不同的浏览器中测试行为时，我发现响应式移动导航在Safari中存在一些错误。
经过一段时间的搜索和测试后，我发现了一个可以在Mac上的Safari中运行的版本，但不幸的是，它不适用于iPhone。

我收到媒体查询，将导航设置为“显示：无；”使用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>