scrollbar not appearing in Safari OSX

Question

scrollbar not appearing in Safari OSX

I have a side menu that slides in and out (utilizing Zurb Foundation). The overflow is set to auto so users can scroll through the menu if it extends beyond the screen.

This functionality is currently supported on these browsers:

Chrome
Firefox
Internet Explorer
Android Chrome
Safari iOS

However, it does not work as expected on Safari for OS X:
In this browser, the menu behaves as if its overflow property is set to hidden, preventing scrolling.

Below is the HTML structure of the menu:

<!-- Off Canvas Menu -->
        <aside class="right-off-canvas-menu">
            <ul class="side-nav" role="navigation" title="Main Navigation" onmouseover="this.title='';">
                [Menu items go here]
            </ul>
        </aside>

Additionally, here is the corresponding SASS code:

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

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

html css scroll safari overflow

Answer 1

Answer №1

When it comes to <code>overflow: auto;

and overflow: scroll;, the behavior is different on iOS compared to OS X. To ensure a consistent experience, it is recommended to use overflow: scroll; along with

-webkit-overflow-scrolling: touch;

for both operating systems.

If you need further assistance, consider exploring these helpful resources:

https://css-tricks.com/almanac/properties/o/overflow/

https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Answer 2

When it comes to <code>overflow: auto;

and overflow: scroll;, the behavior is different on iOS compared to OS X. To ensure a consistent experience, it is recommended to use overflow: scroll; along with

-webkit-overflow-scrolling: touch;

for both operating systems.

If you need further assistance, consider exploring these helpful resources:

https://css-tricks.com/almanac/properties/o/overflow/

https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Answer 3

Answer №2

Try:

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

Answer 4

Try:

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

Answer 5

Answer №3

After encountering a similar issue in my own project, I stumbled upon this question through a Google search. Unfortunately, the solutions provided here did not resolve the problem of the disappearing scroll bar for me. However, I found a helpful solution on this website that worked perfectly.

For anyone facing the same issue, you can customize the appearance of the scroll bar by adding the following CSS:

: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);
}

Answer 6

After encountering a similar issue in my own project, I stumbled upon this question through a Google search. Unfortunately, the solutions provided here did not resolve the problem of the disappearing scroll bar for me. However, I found a helpful solution on this website that worked perfectly.

For anyone facing the same issue, you can customize the appearance of the scroll bar by adding the following CSS:

: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);
}

Answer 7

Answer №4

For me, I found success by applying the property display (I used inline-block, but other options were effective too) to the child elements within the element.

Answer 8

For me, I found success by applying the property display (I used inline-block, but other options were effective too) to the child elements within the element.

Answer 9

Answer №5

There seems to be a problem that is specific to IOS, but we can focus on targeting Safari IOS specifically and apply CSS attributes like overflow: scroll; to resolve the issue.

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

Answer 10

There seems to be a problem that is specific to IOS, but we can focus on targeting Safari IOS specifically and apply CSS attributes like overflow: scroll; to resolve the issue.

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

Answer 11

Answer №6

There was a problem I encountered where certain pointer events were deactivated in Safari (the reason is still unknown). I managed to resolve this issue by including pointer-events:all in the scrolling container.

Answer 12

There was a problem I encountered where certain pointer events were deactivated in Safari (the reason is still unknown). I managed to resolve this issue by including pointer-events:all in the scrolling container.

Answer 13

Answer №7

The problem persisted even after I had included the following code:

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

In order to resolve this issue in Safari and enable scrolling in the div:

1- Make sure to use: overflow-y: scroll; rather than overflow-y: auto; as they produce different outcomes in Safari.

2- If you are setting a height for the div, avoid including overflow properties within it. Instead, create another nested div and apply overflow properties there like so:

HTML :

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

CSS:

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

Answer 14

The problem persisted even after I had included the following code:

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

In order to resolve this issue in Safari and enable scrolling in the div:

1- Make sure to use: overflow-y: scroll; rather than overflow-y: auto; as they produce different outcomes in Safari.

2- If you are setting a height for the div, avoid including overflow properties within it. Instead, create another nested div and apply overflow properties there like so:

HTML :

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

CSS:

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

Answer 15

Answer №8

While this question may be dated, it could still assist those facing similar issues:

In a situation where overflow-y: auto was causing the inability to scroll using the mouse wheel in macOS Safari, despite the scroll bar being visible and functional through dragging.

The remedy involved toggling the pointer-events property between two states (element denotes the scrollable DOM element):

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

Answer 16

While this question may be dated, it could still assist those facing similar issues:

In a situation where overflow-y: auto was causing the inability to scroll using the mouse wheel in macOS Safari, despite the scroll bar being visible and functional through dragging.

The remedy involved toggling the pointer-events property between two states (element denotes the scrollable DOM element):

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

scrollbar not appearing in Safari OSX

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

The alignment of justify-space-around and justify-content-center in Bootstrap 4 appears to be misaligned

Choosing and transferring the table data to be shown in the pop-up box

Align the dropdown menu in the center of every navigation item

What could be causing my hamburger icon to malfunction?

The top header must remain fixed at the top, while the bottom footer should stay fixed at the bottom of the page. The main div will then adjust to fill

As you scroll through the page, the menu gracefully descends alongside you

Foundation Framework sidebar by Zurb

Exploring the power of AngularJS through nested directives

Buttons aligned vertically alongside an input text field

What is the best way to transfer a table row from one table to another in AngularJS?

Execute CGI upon the loading of the page

The design of the page is structured around Semantic-UI Grid, and unfortunately, the spacing between elements cannot

Use the ng-repeat directive to display multiple items and let the user input a quantity for each item. Then, in AngularJs, gather all the form data, including the repeated items and their quantities, and

Creating a CSS background that adjusts to fit any screen resolution

Tooltips experience issues when interacting with elements that do not utilize the :active state

Display a single div and conceal the rest upon clicking a link

What could be causing the issue of not being able to load CSS files or images?

How can I resize the border to match the size of the text inside it?

When the browser's inner width is less than the inner height, use jQuery or JavaScript to show a message on the webpage

"Adjust the width of a div element based on the unique ID of a