overflow: auto ne fonctionne pas sous Safari OSX

J'ai une toile de navigation (à l'aide de Zurb Foundation) et j'ai le débordement de l'ensemble de auto de sorte que l'utilisateur peut faire défiler si le menu est long.

Il est actuellement de travail sur les navigateurs suivants:

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

mais pas sur Safari pour OS X:

Il traite le menu comme le dépassement est hidden et ne défile pas.

Voici le code HTML du 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>

Et voici le sass:

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

OriginalL'auteur J. French | 2015-10-06