JavaScript does not completely get executed on mobile

On my website I ask for cookies. If the user allows it the cookie dialog should disapear and stay away.

<div onresize="cookieResize()" id="cookie_dialog">
      <section>
        <!-- Text Container -->
        <section id="text">
          <p>Wir verwenden Cookies, um die Nutzbarkeit der Website zu optimieren. Wenn Sie auf 'OK' klicken, bestätigen Sie, dass Sie die Cookiehinweise gelesen und akzeptiert haben. Weitere Infos finden Sie <a href="cookies/">hier</a></p>
        </section>
        <section id="allow_request">
          <button onclick="allowCookies()" type="submit" name="button">Erlauben</button>
        </section>
      </section>
    </div>

    <div id="cookie_dialog_placeholder"><!--Empty--></div>

The allow cookie function:

function allowCookies() {
  if (getCookie("alwCki") != "alwcki") {
    document.querySelector("#cookie_dialog").remove();
    document.querySelector("#cookie_dialog_placeholder").remove();
    document.querySelector("#section_1").style.height = "100vH";

    setCookie("alwCki", "yesalw", 31)
  }
}

And if the cookie is set on site load

    <script type="text/javascript">
      if (getCookie("alwCki") == "yesalw") {
        allowCookies();
      }
    </script>

(This code is directly under the "#cookie_dialog_placeholder" div!)

It works on desktop. On mobile only the placeholder is removed. The dialog is still visible under the header. How can I fix the problem? I use IPhone by the way