溢出：自動在Safari OSX中不工作

我有一個畫外導航（使用Zurb Foundation），而且溢出設置爲auto，所以如果菜單很長，用戶可以滾動。溢出：自動在Safari OSX中不工作

它目前工作在以下瀏覽器：

鉻
火狐
的Internet Explorer
的Android瀏覽器
Safari瀏覽器的iOS

但是不適用於Safari for OS X：
它將菜單處理爲溢出爲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; 
}

來源

2015-10-06 J. French

如果有人好奇，我已經差不多解決了它。添加邊距和填充代碼似乎可以幫助Safari在OS X中正常工作，但我遇到了一個奇怪的問題，iOS上的Safari忽略了溢出：另一個元素的隱藏屬性。但這似乎解決了手頭的問題。 '.right-off-canvas-menu {height = 0; 100％; height = 100％; 最大高度：100vh; margin：0; 填充：0; 溢出：auto; -webkit-overflow-scrolling：touch; }' –