Przepełnienie: auto nie działa w Safari OSX

Question

Mam nawigację poza obszarem (używając Zurb Foundation) i mam zestaw przepełnienia ustawiony na auto, aby użytkownik mógł przewijać, jeśli menu jest długie.

Jest obecnie działa na następujących przeglądarkach:

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

ale nie Safari w OS X:
Traktuje menu jak przepełnienie jest hidden i nie przewija.

Oto menu 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> 

A oto Sass:

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

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

Answer 1

overflow: auto; i overflow: scroll; wydają się działać inaczej na iOS i OS X. Spróbuj użyć overflow: scroll; plusa -webkit-overflow-scrolling: touch; na iOS i OS X.

Może te zasoby będą pomocne:

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/