Safari浏览器上的网站移动菜单损坏答案

【问题标题】：website mobile menu broken on safari browserSafari浏览器上的网站移动菜单损坏
【发布时间】：2019-02-05 03:15:38
【问题描述】：

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

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

移动菜单有效

我没有 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 类用于汉堡菜单图标的动画，我认为它与问题无关。

感谢任何帮助！

【问题讨论】：

标签： css safari mobile-safari

【解决方案1】：

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

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

【讨论】：