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

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><a href="/friendradar" class="blue-text  show-loader"><i class="material-icons blue-text">map</i><%=Resources.KSLab.KS2020WithMenu_menuFriendRadar%></a></li>
        <li><a href="/boatfriends" class="blue-text  show-loader"><i class="material-icons blue-text">people</i><%=Resources.KSLab.KS2020WithMenu_menuFriends%></a></li>
        <li><a href="/boatsearch" class="blue-text "><i class="material-icons blue-text">search</i><%=Resources.KSLab.KS2020WithMenu_menuSearchFriends%></a></li>
        <li><a href="/boatfriendreq" class="blue-text "><i class="material-icons blue-text">clear_all</i><%=Resources.KSLab.KS2020WithMenu_menuFriendReq%></a></li>
    </ul>

    <ul id="dropMore" class="dropdown-content">
        <li><a href="/boatmultitrack" class="blue-text show-loader"><i class="material-icons blue-text">flag</i><%=Resources.KSLab.KS2020WithMenu_menuMultitrack%></a></li>
        <li><a href="/boatgroup" class="blue-text show-loader"><i class="material-icons blue-text">supervised_user_circle</i><%=Resources.KSLab.KS2020WithMenu_menuGroups%></a></li>
        <li><a href="/boatscore" class="blue-text show-loader"><i class="material-icons blue-text">star</i><%=Resources.KSLab.KS2020WithMenu_menuChallenges%></a></li>
        <li><a href="/routemeassure" class="blue-text show-loader"><i class="material-icons blue-text">timeline</i><%=Resources.KSLab.KS2020WithMenu_menuRouteMeas%></a></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><a href="#" data-target="slide-out" class="sidenav-trigger  remove-padding"><i class="material-icons">menu</i></a></li>
                        <%--<li><a href="#" class="dropdown-trigger hide-on-menu-out" data-target="langdrops"><i class="material-icons">language</i></a></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">&nbsp;</div>
            </div>


        </li>
        <li><a href="/" class="white-text show-loader"><i class="material-icons white-text">home</i><%=Resources.KSLab.KS2020WithMenu_menuHome%></a></li>
        <li><a href="/logbook" class="white-text show-loader"><i class="material-icons white-text">map</i><%=Resources.KSLab.KS2020WithMenu_menuMyLog%></a></li>
        <li><a href="/boatshare" class="white-text show-loader"><i class="material-icons white-text">share</i><%=Resources.KSLab.KS2020WithMenu_menuShare%></a></li>
        <li><a href="#" class="white-text dropdown-trigger" data-target="dropFriends"><i class="material-icons white-text">people</i><%=Resources.KSLab.KS2020WithMenu_menuSubFriends%></a></li>
        <li><a href="#" class="white-text dropdown-trigger" data-target="dropMore"><i class="material-icons white-text">filter_9_plus</i><%=Resources.KSLab.KS2020WithMenu_menuMore%></a></li>
        <li><a href="/boatprofile" class="white-text show-loader"><i class="material-icons white-text">settings</i><%=Resources.KSLab.KS2020WithMenu_menuMyProfile%></a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a href="#" class="white-text dropdown-trigger" data-target="langdrops"><i class="material-icons white-text">language</i><%=Resources.KSLab.generalSelectLanguage%></a></li>

        <li><a href="/boathelp" class="white-text show-loader"><i class="material-icons white-text">help_outline</i><%=Resources.KSLab.KS2020WithMenu_menuHelp%></a></li>
        <li><a href="/boatabout" class="white-text show-loader"><i class="material-icons white-text">info</i><%=Resources.KSLab.KS2020WithMenu_menuAbout%></a></li>
        <li><a href="/boatlogout" class="white-text show-loader"><i class="material-icons white-text">close</i><%=Resources.KSLab.KS2020WithMenu_menuLogOff%></a></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);