オーバーフロー：autoがSafari OSXで機能しない
キャンバス外のナビゲーション（ Zurb Foundation を使用）を使用し、オーバーフローをautoに設定して、メニューが長い場合にユーザーがスクロールできるようにします。
現在が以下のブラウザで動作しています：
- Chrome
- Firefox
- インターネットエクスプローラ
- Android Chrome
- Safari iOS
しかしOS XのSafariにはありません：
メニューをオーバーフローがhiddenのように扱い、スクロールしません。
HTMLメニューは次のとおりです。
<!-- 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>
そして、これがサスです：
// Off Canvas
// - - - - - - - - - - - - - - - - - - - - - - -
.right-off-canvas-menu {
height: 100%;
max-height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
overflow: auto;およびoverflow: scroll;はiOSとOS Xでは動作が異なるようです。overflow: scroll;プラス-webkit-overflow-scrolling: touch; iOSおよびOSX。
多分これらのリソースはあなたを助けるでしょう：
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/
使用する：
white-space:nowrap;
overflow: scroll;
-webkit-overflow-scrolling: touch;