IOS（Safari）的Bootstrap hamburgermenu（崩潰）可見性問題

Question

我有一個使用bootstrap的響應webapp。當移動大小的漢堡菜單顯示在標題中時。

當點擊一個pc/mac/android手機時，它顯示正確..但是，當用iOS-Safari點擊時，它顯示了四分之一秒，並且再次隱藏。我懷疑這是一個高度或Z指數的問題，但我不知道，我一直無法解決它。

你可以試試www.gjovikhk.no。

不管怎麼說..這裏是標題和菜單的HTML代碼：

<div id="menu" class="navbar navbar-default"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <div id="logo" class="logo-placeholder"> 
         <a href='Default.aspx'> 
          <img runat="server" id="imgClubLogo" src="" /></a> 
        </div> 

       </div> 
       <div class="navbar-collapse collapse" style="z-index:9999999999"> 
        <ul class="nav navbar-nav navbar-left menu-row" style="margin-top: 5px;"> 
         <li class="nav"> 
          <asp:LinkButton runat="server" ID="lnkLoginMobile" Text="Login" href="/Login" /> 
         </li> 
         <li class="nav"> 
          <asp:LinkButton runat="server" href="/ViewAboutUs" ID="lnkAboutUsMobile" Text="Om GHK" /> 
         </li> 


         <li class="nav"> 
          <a href="#" runat="server" id="lnkPersonalMobile" style="display: none"><i style="padding-right: 5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag</a> 
         </li> 
         <li class="nav"> 
          <a href="Forum.aspx?type=1" runat="server" id="lnkCoachForumMobile" style="display: none"><i style="padding-right: 5px" class="glyphicon glyphicon-star-empty gly-spin"></i>&nbsp;Trenerforum</a> 
         </li> 
         <li class="nav"> 
          <div style="float: left; color: lightyellow; width: 18px; padding-top: 16px" class="glyphicon glyphicon-star-empty" runat="server" id="starPersonalMobile" clientidmode="Static" visible="False">&nbsp;</div> 
          <div style="float: left"> 
           <div class="dropdown" runat="server" id="ddlPersonalMobile" clientidmode="Static" visible="False" style="display: inline-block"> 
            <a class="dropdown-toggle" id="menu3mobile" data-toggle="dropdown" style="color:darkgreen!important"> 
             Mine lag 
            </a> 
            <ul class="nav navbar-nav dropdown-menu" role="menu" aria-labelledby="menu1"> 
             <asp:ListView runat="server" ID="lvCoachesTeamsMobile" ItemType="Servicelayer.Team" OnItemCommand="lvTeams_OnItemCommand"> 
              <ItemTemplate> 
               <li role="presentation"> 
                <asp:LinkButton runat="server" ID="lnkNavDep" style="color:darkgreen!important" Text='<%# Item.Name %>' CommandArgument='<%# Item.Id %>' CommandName="NavigateToTeam" /> 
               </li> 
              </ItemTemplate> 
             </asp:ListView> 
            </ul> 
           </div> 
          </div> 
         </li> 
         <li class="nav"> 
          <asp:LinkButton runat="server" href="/TeamOverview" ID="lnkTeamOverview" Text="Lag" /> 
         </li> 
         <li class="nav"> 
          <asp:LinkButton Visible="False" runat="server" href="/AdminPage" ID="lnkAdminPage" Text="Admin" /> 
         </li> 
         <li class="nav" style="display: none"> 
          <asp:LinkButton Visible="False" runat="server" href="/EventCalendar" ID="lnkTeamOverviewMobile" Text="Eventkalender" /> 
         </li> 
         <li class="nav"> 
          <asp:LinkButton runat="server" ID="lnkLogoutMobile" Text="Logg ut" OnClick="lnkLogoutMobile_OnClick" Visible="False" /> 
         </li> 
        </ul> 

       </div> 
       <div class="navbar-icon-topright"> 
        <div style="float: right; margin-top: -8px; margin-right: 10px"> 
         <button id="contacttrigger" type="button" class="btn btn-warning btn-circle btn-lg contact-trigger"><i class="glyphicon glyphicon-earphone"></i></button> 
         <%--<img id="contacttrigger" src="Content/Images/icon-contact.png">--%> 
         <asp:LoginView runat="server" ViewStateMode="Disabled" ID="loginView"> 
          <LoggedInTemplate> 
           <ul class="nav navbar-nav navbar-right"> 
            <li><a runat="server" href="~/UserConfig.aspx" title="Manage your account"> 
             <div style="float: left"> 
              <div class="avatar-container" style="height: 30px; width: 30px; margin-top: -5px"> 
               <img class="avatar" runat="server" id="loginAvatar" src="" style="height: 30px; width: 30px" /> 
              </div> 
             </div> 
             <div style="float: left; padding-left: 10px; color: #333"> 
              Hei <%: Context.User.Identity.GetUserName() %> <span class="btn btn-success btn-xs glyphicon glyphicon-user"></span> 
             </div> 
            </a></li> 
           </ul> 
          </LoggedInTemplate> 
         </asp:LoginView> 
        </div> 
       </div> 

      </div> 

Answer 1

試試這個，有相應的媒體查詢和/或額外的選擇只會影響響應和/或僅適用於iPhone，那樣精確，您需要：

.collapse.in { 
    overflow: hidden; 
}