overflow: auto not working in Safari OSX

Question

I have an off-canvas navigation (using Zurb Foundation) and I have the overflow set to auto so the user can scroll if the menu is long.

It is currently working on the following browsers:

• Chrome
• Firefox
• Internet Explorer
• Android Chrome
• Safari iOS

but not on Safari for OS X:
It treats the menu like overflow is hidden and does not scroll.

Here is the HTML menu:

<!-- Off Canvas Menu -->
        <aside class="right-off-canvas-menu">
            <ul class="side-nav" role="navigation" title="Main Navigation" onmouseover="this.title='';">
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Home</a></li>
                <li class="divider"></li>
                <li role="menuitem" class="active-parent">
                    <a href="#">Agriculture & Natural Resources</a>
                    <ul>
                        <li role="menuitem" class="active"><a href="third-level.html">Home & Garden</a></li>
                        <ul>
                            <li role="menuitem"><a href="#">Lawn & Garden Tips</a></li>
                            <li role="menuitem"><a href="fourth-level.html">Garden Q&A</a></li>
                            <li role="menuitem"><a href="#">Ponds</a></li>
                            <li role="menuitem"><a href="#">Turfgrass & Calendar</a></li>
                            <li role="menuitem"><a href="#">Weeds</a></li>
                            <li role="menuitem"><a href="#">Insects</a></li>
                            <li role="menuitem"><a href="#">Invasive Plants</a></li>
                            <li role="menuitem"><a href="#">Wildlife</a></li>
                            <li role="menuitem"><a href="#">Gold Medal Plants</a></li>
                            <li role="menuitem"><a href="#">Finding Arborists</a></li>
                            <li role="menuitem"><a href="#">Finding Landscapers</a></li>
                        </ul>
                        <li role="menuitem"><a href="#">Plant Material</a></li>
                        <li role="menuitem"><a href="#">Diagnostic Testing</a></li>
                        <li role="menuitem"><a href="#">Green Industry</a></li>
                        <li role="menuitem"><a href="#">Publications</a></li>
                        <li role="menuitem"><a href="#">Newsletters</a></li>
                    </ul>
                </li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Family & Consumer Sciences</a></li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">4-H Youth</a></li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Events</a></li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Contact Us</a></li>
                <li class="divider"></li>
            </ul>
        </aside>

And here is the sass:

// Off Canvas
// - - - - - - - - - - - - - - - - - - - - - - -

.right-off-canvas-menu {
    height: 100%;
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

Answer 1

overflow: auto; and overflow: scroll; seem to work different on iOS and OS X. Try to use overflow: scroll; plus -webkit-overflow-scrolling: touch; on iOS and OS X.

Maybe these resources will assist you:

https://css-tricks.com/almanac/properties/o/overflow/

https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

https://benfrain.com/horizontal-scrolling-area-css-overflow-ios/