CODEWITHSUNDEEP
htmlcssscrollsafarioverflow
J. French
J. French

Reputation: 231

overflow: auto not working in Safari OSX

I have an off-canvas navigation (using Zurb Foundation) and I have the overflow set to auto so the user can scroll if the menu is long.

It is currently working on the following browsers:

but not on Safari for OS X:
It treats the menu like overflow is hidden 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;
}

Upvotes: 23

Views: 65118

Answers (8)

jhyot
jhyot

Reputation: 3955

This question is quite old, so it might not be the same problem, but this might help other people searching for similar issues:

In my case, with overflow-y: auto, I was not able to scroll using the mouse wheel on macOS Safari, even though the scroll bar was there and I was able to drag the scroll bar.

The solution was to "flick" the pointer-events property between two values (element is the scrollable DOM element):

element.style.setProperty('pointer-events', 'none');
setTimeout(() => {
      element.style.setProperty('pointer-events', 'auto');
    },
    0);

Upvotes: 0

Rawand Deheliah
Rawand Deheliah

Reputation: 1582

this issue wasn't solved when I had added :

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

To solve it in Safari and to add scrolling in div:

1- make sure to add: overflow-y: scroll; and not overflow-y: auto; because it seems they have different effect in Safari .

2- Then if you are specifying height for that div, don't add overflow properties inside that div. Instead, make another nested div and add overflow properities there like this:

html :

<div class="main"> 
  <div class=""scrollable> </div>
</div>

css:

.main{
 height: 93vh;
}
. scrollable{
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Upvotes: 0

Pedro Pessoa
Pedro Pessoa

Reputation: 241

My issue was that some pointer events were disabled in Safari (still unclear why), so fixed it by adding pointer-events:all to the scrolling container.

Upvotes: 0

SantoshK
SantoshK

Reputation: 1877

The issue is IOS specific we can target safari ios and add css attribute such as overflow: scroll; to fix the issue.

 @supports (-webkit-touch-callout: none) {
           .classname{
                       white-space:nowrap;
                       overflow: scroll;
                       -webkit-overflow-scrolling: touch;  
                     }
                     }

Upvotes: 0

artdias90
artdias90

Reputation: 735

In my case it worked when I set a display (used inline-block but others worked as well) property to the element's children.

Upvotes: 0

Exadra37
Exadra37

Reputation: 13054

I found this question from a Google search when trying to fix the same type of issue in my own project, but the solutions here have not solved the scroll bar disappearing, but the solution in this site solved it for me.

So adapting it to the div you want to show the scroll bar with auto behavior:

:root {
  --scrollbar-track-color: transparent;
  --scrollbar-color: rgba(0,0,0,.2);

  --scrollbar-size: .375rem;
  --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
}
.right-off-canvas-menu::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}
.right-off-canvas-menu::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
.right-off-canvas-menu::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  /* Add :hover, :active as needed */
}
.right-off-canvas-menu::-webkit-scrollbar-thumb:vertical {
  min-height: var(--scrollbar-minlength);
}
.right-off-canvas-menu::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-minlength);
}

Upvotes: 0

Gil Snovsky
Gil Snovsky

Reputation: 210

Use:

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

Upvotes: 4

Ruslan Zhomir
Ruslan Zhomir

Reputation: 888

overflow: auto; and overflow: scroll; seem to work different on iOS and OS X. Try to use overflow: scroll; plus -webkit-overflow-scrolling: touch; on iOS and OS X.

Maybe these resources will assist 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/

Upvotes: 15

Related Questions