Off canvas menu doesn't scroll on IOS scrolls the body instead

Question

I'm trying to get an off canvas nav menu working, I'm having an issue where the menu will not scroll once loaded the body of the page still scrolls but I cannot get the menu to scroll when loaded over the body of the page, does anyone know how to get this working (foundation 6.5.3 framework) code below:

<div class="nav-mobile">
    <div class="grid-x nav-bar">
        <div class="cell small-4 medium-5 menu">
            <img class="mobile-menu" src="~/Content/Images/mobile-menu-bg.png" data-toggle="offCanvasMenuProductsMobile" alt="Mobile menu icon" />
            <div class="off-canvas-wrapper">
                <div class="off-canvas position-left" id="offCanvasMenuProductsMobile" data-off-canvas data-content-scroll="false">
                    <div class="content">
                        <div class="heading">
                            <div class="menu-item-group">
                                <ul class="tabs" data-tabs id="menu-tabs">
                                    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true"><p>@Model.NavBar.ProductsNavigation.Header</p></a></li>
                                    <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2"><p>@Model.NavBar.PlanNavigation.Header</p></a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <a class="account-button" href="@Model.NavBar.Account.LinkUrl">
                                    <img src="/Content/Images/NavBar/nav-account-icon.svg" alt="Account icon" />
                                </a>
                                <button class="menu-button" aria-label="Close menu" type="button" data-close>
                                    <img src="/Content/Images/NavBar/nav-arrow-back-icon.svg" alt="Close menu" />
                                </button>
                            </div>
                        </div>
                        <div class="body">
                            <div class="grid-x">
                                <div class="cell small-12 medium-6">
                                    <div class="tabs-content" data-tabs-content="menu-tabs" data-smooth-scroll>
                                        <div class="tabs-panel is-active" id="panel1">
                                            <div class="grid-x">
                                                @if (Model.NavBar.ProductsNavigation.ProductCatalogue != null)
                                                {
                                                    foreach (var category in Model.NavBar.ProductsNavigation.ProductCatalogue.ProductCategories)
                                                    {
                                                        <div class="cell small-6 product-container">
                                                            <a href="@category.PageLink">
                                                                <img class="lazy" alt="@category.Image.AltText()" src="@category.Image.ToOnePixel()" data-src="@category.Image.ToUrl()" />
                                                                <span>@category.NavigationName</span>
                                                            </a>
                                                        </div>
                                                    }
                                                }
                                                <div class="cell small-12 medium-offset-2 medium-5 menu-group border-top">
                                                    @foreach (var module in Model.NavBar.SharedNavigation.ListOfIconText)
                                                    {
                                                        <div class="menu-group-info">
                                                            <img class="lazy" alt="@module.Image.AltText()" src="@module.Image.ToOnePixel()" data-src="@module.Image.ToUrl()" />
                                                            <div class="text">
                                                                <h2 class="menu-title">@module.Header</h2>
                                                                <p>@module.Paragraph.ToRichText()</p>
                                                            </div>
                                                        </div>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tabs-panel" id="panel2">
                                            <div class="grid-x">
                                                <div class="cell small-12 medium-5">
                                                    <div class="grid-x">
                                                        @foreach (var link in Model.NavBar.PlanNavigation.Links)
                                                        {
                                                            <div class="cell small-12 plan-container">
                                                                <a href="@link.LinkUrl">
                                                                    @link.Text.ToRichText()
                                                                </a>
                                                            </div>
                                                        }
                                                        <div class="cell small-12 plan-title-container">
                                                            <h2>@Model.NavBar.LearnNavigation.Header</h2>
                                                        </div>
                                                        @foreach (var link in Model.NavBar.LearnNavigation.Links)
                                                        {
                                                            <div class="cell small-12 plan-sub-container">
                                                                <a href="@link.LinkUrl">
                                                                    @link.Text.ToRichText()
                                                                </a>
                                                            </div>
                                                        }
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell small-4 medium-2 logo">
            <a href="/">
                <img class="lazy" alt="" src="" data-src="" />
            </a>
        </div>
        <div class="cell small-4 medium-5 account-menu">
            <a class="menu-item" href="@Model.NavBar.Basket.LinkUrl">
                <img src="/Content/Images/basket.svg" alt="Account icon" />
            </a>
        </div>
    </div>
</div>

I tried using jquery to focus on the menu, switching the body scroll off but the menu still won't scroll to the bottom