CODEWITHSUNDEEP
css
Hawxby
Hawxby

Reputation: 2804

Mac's not reliably displaying horizontal scroll bars.

I'm at a loss as to why Mac's are refusing to display horizontal scroll bars reliably on overflowing elements. I'm not a frequent Mac user so this could just be me being stupid.

https://codepen.io/phawxby/pen/JrayeG

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: block;
  max-width: 500px;
  overflow-x: scroll;
  white-space: nowrap;

  li {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: red;
  }
}

Weirdly they don't display via browserstack but do display on the physical Mac next to me. Unfortunately we're getting reports of some users which are getting the issue too, obviously they're physical machines.

Any suggestions would be much appreciated.

High Sierra - Safari 11 Browserstack enter image description here

High Sierra - Chrome 61 Browserstack enter image description here

High Sierra - Safari 11 Physical enter image description here

High Sierra - Chrome 61 Physical enter image description here

Upvotes: 6

Views: 5917

Answers (2)

deadfishli
deadfishli

Reputation: 769

Mac OSX has a system setting to turn on and off constantly showing scroll bars. It can be found in the System Settings -> General -> "Display Scrollbars".

If "display scrollbars" is turned off, they'll only show up in the browser window while you're actually scrolling. That way you won't see them in overflowing containers unless you're scrolling.

Upvotes: 8

Jared Bledsoe
Jared Bledsoe

Reputation: 559

Check this link out for some examples of custom scrollbars - https://codepen.io/devstreak/pen/dMYgeO

ul::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

If you set display: inline and simply create your own scrollbar style, it should stay visible.

Upvotes: -1

Related Questions