iphone 中的菜单不可见，但可点击？

Question

出现在移动设备中的汉堡菜单在 Android 中运行良好。但在 ios（不是桌面响应式浏览器，而是实际的苹果设备）中，它似乎是不可见的，但在点击时仍然起作用，因为它的选项仍然可以被点击，我们导航到另一个页面。

附上网址link，供参考如下： CumminsFest.in

之前查过很多这样的问题，都说是相关的：

{
 - z-index
 - webkit-overflow-scrolling:touch
 - overflow:hidden
}

但其中 none 似乎有效，原因之一是我可能做错了什么。

我的菜单代码是：

(function($) {
$('.hamburger-menu').on('click', function() {
    $(this).toggleClass('open');
    $('.site-navigation').toggleClass('show')
}); 
})(jQuery)

.site-header {
position: relative;
width: 100%;
}

/*------------------------------------------------------------
## header-bar
------------------------------------------------------------*/
.site-header .header-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    padding: 20px 0;
    text-align: center; 
    background: black ;
}

.header-bar .site-branding {
    margin-bottom: 0;
    font-size: 30px;
    font-weight: 800;
}

.header-bar .site-branding a {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
}

/*------------------------------------------------------------
### site-navigation
------------------------------------------------------------*/
/*
  Hamburger Menu
----------------------------------------*/
.hamburger-menu {
    position: relative;
    width: 100%;
    max-width: 24px;
    height: 22px;
    margin-left: auto;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    opacity: 1;
    left: 0;
    transition: .25s ease-in-out;
}

.hamburger-menu span:nth-child(1) {
    top: 2px;
}

.hamburger-menu span:nth-child(2),
.hamburger-menu span:nth-child(3) {
    top: 10px;
}

.hamburger-menu span:nth-child(4) {
    top: 18px;
}

.hamburger-menu.open span:nth-child(1) {
    top: 18px;
    width: 0;
    left: 50%;
}

.hamburger-menu.open span:nth-child(2) {
    transform: rotate(45deg);
}

.hamburger-menu.open span:nth-child(3) {
    transform: rotate(-45deg);
}

.hamburger-menu.open span:nth-child(4) {
    top: 18px;
    width: 0;
    left: 50%;
}

.site-navigation {
    position: absolute;
    top: -11px;
    right: 15px;
    z-index: 9999  !important;
    width: 100%;
    height: 22px;
    overflow-x: hidden;
    list-style: none;
    transition: all .35s;
    color: hsl(0, 0%, 100%);
}

.site-navigation.show {
    height: auto;
}

.site-navigation ul {
    position: fixed;
    top: 0;
    left: -320px;
    z-index: 9999  !important;
    width: 250px;                                                               /*adddddd for cross of hamburger*/
    height: 100vh;
    overflow-x: scroll;
    padding: 10px;
    margin: 0;
    background: #050505;
    transition: all 0.35s;
}  

.site-navigation.show ul {
    left: 0;
}

.site-navigation ul li {
    display: block;
    padding: 15px 0;
}   

.site-navigation ul li a {
    display: block;
    color: #fff;
    transition: all 0.35s;
    text-decoration: none;
    font-size: 14px;
    padding-left: 0px;                                                                              
}

@media screen and (min-width: 992px) {    
    .site-navigation ul li a {                                                              
        padding-left: 40px;
    }       
    .header-bar .site-branding {
        margin-left: 35px;
    }    
    .site-navigation {
        position: relative;
        top: auto;
        right: auto;
        height: auto;
        padding-right: 35px;
        background: transparent;
        z-index: 9999  !important;
    }    
    .site-navigation ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        padding: 0;
        overflow: auto;
        background: transparent;
        z-index: 9999  !important;
    }
    .site-navigation ul li {
        padding: 0;
    }
    .site-navigation ul li a {
        color: #fff;
    }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="site-header">
    <div class="header-bar">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-10 col-lg-4">
                    <h1 class="site-branding flex">
                        <a href="index.html">INNOVATION</a>
                    </h1>
                </div>

                <div class="col-2 col-lg-8">
                    <nav class="site-navigation">
                        <div class="hamburger-menu d-lg-none">
                           <span onclick="void(0)"></span>
                            <span onclick="void(0)"></span>
                            <span onclick="void(0)"></span>
                            <span onclick="void(0)"></span>
                        </div><!-- .hamburger-menu -->

                        <ul>
                            <img id="mylogo" src="img.jpeg" height="130" width="130"> 
                            <li><a href="index.html">HOME</a></li>
                            <li><a href="index.html#redirect1">EVENTS</a></li>
                            <li><a href="#">GALLERY</a></li>
                            <li><a href="#">SPONSORS</a></li>
                            <li><a href="#">ACCOMODATION</a></li>
                            <li><a href="#">CONTACT US</a></li>
                            <li><a href="#">ABOUT</a></li>
                        </ul><!-- flex -->                                          
                    </nav><!-- .site-navigation -->
                </div><!-- .col-12 -->
            </div><!-- .row -->
        </div><!-- container-fluid -->
    </div><!-- header-bar -->
</header><!-- .site-header -->

非常感谢任何帮助。

Answer 1

这似乎与在 .site-navigation class 上设置的 height: 22px; 和 overflow-x: hidden; 有关。

删除这两行解决了我 iPhone 上的问题。请参阅此 CodePen 以供参考 https://codepen.io/baadaa/pen/WNbmoNK

（建议）此外，对于可见性切换，我建议使用 transform: translateX(-320px); 和 transform: translateX(0); 而不是 left:。出于性能原因。

iphone 中的菜单不可见，但可点击？

Menu in iphone invisible, but clickable?

javascript

html

css

uinavigationbar