IOS (Safari)의 부트 스트랩 hamburgermenu (축소) 가시성 문제

Question

부트 스트랩을 사용하는 반응 형 webapp가 있습니다. 이동할 수있는 크기의 햄버거 메뉴가 머리글에 표시됩니다.

pc/mac/android 전화로 클릭하면 올바르게 표시됩니다.하지만 iOS-Safari로 클릭하면 1/4 초 동안 나타나고 다시 숨 깁니다. 이것이 높이 또는 z- 색인 문제라고 의심 스럽지만 확실하지 않습니다. 그리고 나는 그것을 해결할 수 없었습니다.

www.gjovikhk.no에서 직접 시도 할 수 있습니다. 같은 정확한로,

<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

는 반응 및/또는 단지 아이폰에 영향을 미디어 쿼리 및/또는 추가 선택기 대응이 시도 : 어쨌든

.. 여기가 헤더와 메뉴의 HTML 코드 당신이 필요합니다

이

.collapse.in { 
    overflow: hidden; 
}