Overflow: Automatically not working on Safari OSX

Question

I have offline navigation (using Zurb Foundation ), and I have an overflow set to auto so that the user can scroll if the menu is longer.

Currently works in the following browsers:

• Chrome
• Firefox
• Internet explorer
• Android Chrome
• Safari iOS

but not for Safari for OS X :
It treats the menu as hidden overflow 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 differently on iOS and OS X. Try using overflow: scroll; plus -webkit-overflow-scrolling: touch; on iOS and OS X.

Perhaps these resources will help 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/

Answer 2

Using:

 white-space:nowrap; overflow: scroll; -webkit-overflow-scrolling: touch;