Bootstrap hamburgermenu (collapse in) visibility issue on IOS (Safari) - ios

Question

I have a responsive webapp which uses bootstrap. When mobile-size a hamburger menu shows in the header.
When clicked on a pc/mac/android phone it displays correctly.. But when clicked with iOS-Safari, it shows up for a quarter of a second, and hides again. I suspect this is a height or z-index issue but I'm not sure, and I have not been able to solve it.
You can try for yourself on www.gjovikhk.no.
Anyways.. here is the HTML code for the header and menu :
<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">
<i style="padding-right: 5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag
</li>
<li class="nav">
<i style="padding-right: 5px" class="glyphicon glyphicon-star-empty gly-spin"></i> Trenerforum
</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"> </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

Try this, with corresponding media queries and/or extra selectors to affect only responsive and/or only iPhone, as precise as you need:
.collapse.in {
overflow: hidden;
}