Materialize css - side-nav - dropdown - wrong links on iOS Safari - css

Question

I have a materialize css web app with a side-nav.
In the side-nav there are two "sub-menus" as dropdown-content.
It works perfectly fine on all browsers except Safari/iOS, where a click in the sub-menu will open another link than the one clicked. Looks a little random, but maybe it selects the link below in the sidenav menu.
The really weird thing is, that it works on iPhone 5.
It also works on iPhone 7 but here comes the weird part: only if you make long-click (tap and hold) on the menu item, then it displays a preview of the link and you can select open. In that case it is the correct menu item from the drop-down content that is displayed.
I am very puzzled and is excited to see if anyone can see through this...
I have tried a few different css options besided the standard materialize css, they are included in the code.
(Version 1.0.0 of materialize)
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style>
header, main, footer {
padding-left: 300px;
}
.hide-on-menu-out {
display: none;
}
/*https://github.com/Dogfalo/materialize/issues/1123 */
.navbar-fixed nav {
position: fixed;
/* width is 100% minus the fixed left navbar (240px) */
width: -moz-calc(100% - 300px); /* Firefox */
width: -webkit-calc(100% - 300px); /* Chrome, Safari */
width: calc(100% - 300px); /* IE9+ and future browsers */
}
.dropdown-content a {
/*background-color:red;*/
position:relative;
z-index: 10000 !important;
}
#media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
.show-on-menu-out {
display: block;
}
.hide-on-menu-out {
display: block;
}
/* https://github.com/Dogfalo/materialize/issues/1123 */
.navbar-fixed nav {
width: 100%;
}
}
</style>
<asp:ContentPlaceHolder ID="header" runat="server"></asp:ContentPlaceHolder>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FormBody" runat="server">
<ul id="langdrops" class="dropdown-content">
<asp:Literal ID="litLangs" runat="server"></asp:Literal>
</ul>
<ul id="dropFriends" class="dropdown-content">
<li><i class="material-icons blue-text">map</i><%=Resources.KSLab.KS2020WithMenu_menuFriendRadar%></li>
<li><i class="material-icons blue-text">people</i><%=Resources.KSLab.KS2020WithMenu_menuFriends%></li>
<li><i class="material-icons blue-text">search</i><%=Resources.KSLab.KS2020WithMenu_menuSearchFriends%></li>
<li><i class="material-icons blue-text">clear_all</i><%=Resources.KSLab.KS2020WithMenu_menuFriendReq%></li>
</ul>
<ul id="dropMore" class="dropdown-content">
<li><i class="material-icons blue-text">flag</i><%=Resources.KSLab.KS2020WithMenu_menuMultitrack%></li>
<li><i class="material-icons blue-text">supervised_user_circle</i><%=Resources.KSLab.KS2020WithMenu_menuGroups%></li>
<li><i class="material-icons blue-text">star</i><%=Resources.KSLab.KS2020WithMenu_menuChallenges%></li>
<li><i class="material-icons blue-text">timeline</i><%=Resources.KSLab.KS2020WithMenu_menuRouteMeas%></li>
</ul>
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue">
<ul id="nav-mobile" class="left">
<!-- show-on-large show-on-extra-large -->
<li><i class="material-icons">menu</i></li>
<%--<li><i class="material-icons">language</i></li>--%>
</ul>
<span data-target="slide-out" style="cursor: pointer" id="navbarBoatName" class="sidenav-trigger center hide-on-menu-out"></span>
<a href="/" style="margin-top: 4px; margin-right: 5px;" class="right brand-logo">
<img style="height: 50px;" src="/Public/Images/LogoWhite150x57.png" /></a>
</div>
</nav>
</div>
<ul id="slide-out" class="sidenav sidenav-fixed blue">
<li>
<div class="user-view">
<div class="background">
<img src="/Public/Images/ocean.jpg">
</div>
<div id="notifyAlert" class="notifyAlert">
<a href="/notifications" class="btn-floating btn-large waves-effect pulse waves-light alert-red">
<i class="fa large fa-bell"></i></a>
</div>
<img id="menuBoatImage" class="circle" src="/Public/Images/noimage.png">
<div style="clear: both"></div>
<div id="menuBoatName" class="white-text name"></div>
<div id="menuBoatType" class="white-text email"> </div>
</div>
</li>
<li><i class="material-icons white-text">home</i><%=Resources.KSLab.KS2020WithMenu_menuHome%></li>
<li><i class="material-icons white-text">map</i><%=Resources.KSLab.KS2020WithMenu_menuMyLog%></li>
<li><i class="material-icons white-text">share</i><%=Resources.KSLab.KS2020WithMenu_menuShare%></li>
<li><i class="material-icons white-text">people</i><%=Resources.KSLab.KS2020WithMenu_menuSubFriends%></li>
<li><i class="material-icons white-text">filter_9_plus</i><%=Resources.KSLab.KS2020WithMenu_menuMore%></li>
<li><i class="material-icons white-text">settings</i><%=Resources.KSLab.KS2020WithMenu_menuMyProfile%></li>
<li>
<div class="divider"></div>
</li>
<li><i class="material-icons white-text">language</i><%=Resources.KSLab.generalSelectLanguage%></li>
<li><i class="material-icons white-text">help_outline</i><%=Resources.KSLab.KS2020WithMenu_menuHelp%></li>
<li><i class="material-icons white-text">info</i><%=Resources.KSLab.KS2020WithMenu_menuAbout%></li>
<li><i class="material-icons white-text">close</i><%=Resources.KSLab.KS2020WithMenu_menuLogOff%></li>
</ul>
</header>
<main>
<asp:ContentPlaceHolder ID="BelowMenu" runat="server"></asp:ContentPlaceHolder>
</main>
<asp:ContentPlaceHolder ID="OutsideMain" runat="server"></asp:ContentPlaceHolder>
</asp:Content>

Answer 1

I added inDuration, outDuration and closeOnClick options to fix this. Here are all my options for this particular example.
var dropdownOptionsMobile = {
coverTrigger: false,
inDuration: 0,
outDuration: 0,
hover: false,
closeOnClick: false
}
var elems = document.querySelectorAll('.dropdown-trigger-mobile');
var instances = M.Dropdown.init(elems, dropdownOptionsMobile);

Answer 2

It is a known issue, here you can read about it and the solution:
Select element is misbehaving on iOS
Shortly, the dropdown issue itself is caused by the animation. You can use the materialize-css-helper package to keep the animation and fix the issue, or just remove the animation through css:
.dropdown-content {
transform: none !important;
}

Answer 3

I have the same problem and I've founded out that it is a bug. They've already fixed it, but didn't released :(
Look here, there are some tips, like set closeOnClick to false