网站移动菜单在 safari 浏览器上损坏

Question

我正在处理这个项目：https://kickit.gr/ 我在 Safari 浏览器上遇到主页移动菜单的问题（仅限！）。

当汉堡按钮被点击时，菜单，即使它打开并且可以点击，它是不可见的！

移动菜单有效 < 750px 屏幕宽度。

我没有 iphone 并且通过带有虚拟 safari 浏览器的站点进行调试不是那么有效。我尝试更改一些 css，但没有成功...

您可以在现场查看问题。

这里是大部分相关代码：

function hamburgerButtonClick() {
  var hamburger = $('.hamburger');
  var menu = $('.menu');

  var is_active = 'is-active';
  var mobile_menu = 'mobile_menu';

  if (!hamburger.hasClass(is_active)) {
    hamburger.addClass(is_active);
    menu.addClass(mobile_menu);
  } else {
    hamburger.removeClass(is_active);
    hamburger.removeClass(mobile_menu);
    menu.removeClass(mobile_menu);
  }
}

.sticky_menu .menu {
  display: block;
  text-align: center;
  padding-top: 30px;
  margin: 0 auto;
  float: none;
}

.mobile_menu {
  display: block !important;
  width: 100%;
  position: fixed;
  top: 70px;
  background: #191b1a;
  padding-top: 10px;
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="sticky_menu" id="sticky_menu">
  <div class="menu_holder">
    <div class="logo"></div>
    <button class="hamburger hamburger--spin" type="button" onclick="hamburgerButtonClick()">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
    <div class="menu">
      <ul>
        <li></li>
      </ul>
      <div class="social_menu_mobile"></div>
    </div>
  </div>
</nav>

.is_active class 用于汉堡菜单图标的动画，我认为它与问题无关。

感谢任何帮助！

Answer 1

显然 overflow: hidden 在 Safari iOS 中存在一些问题。

我在 header_frontpage.css 中删除了针对节点的属性。现在它按预期工作了。

网站移动菜单在 safari 浏览器上损坏

website mobile menu broken on safari browser

css

safari

mobile-safari