Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

OSX Safari scrollbar invisible

See original GitHub issue

I’ve been trying to debug this with no luck. Baron works great on every browser except Safari on OSX for my build. The _scrollbar class doesn’t get appended to the HTML tag, so the scrollbar is invisible. I’ve tried css-guru:true and it didn’t help either. Any idea what could be causing this? I think it may have to do with overflow hidden properties, but it works perfectly fine on Chrome and Firefox OSX. I’ve tried changing these properties but haven’t gotten it to work yet.

Root = “html” Scroller= “body”

Here’s my / SCSS / JS:

baron({ position: 'absolute', cssGuru:true, root: '.baron', scroller: '.baron__scroller', bar: '.baron__bar', scrollingCls: '_scrolling', draggingCls: '_dragging' });

html { overflow: hidden;

}

body { overflow-x: hidden; -webkit-overflow-scrolling: touch; }

.baron { height: 100%; }

.baron__clipper { position: relative; overflow: hidden; }

.baron__scroller { overflow-y: scroll; -ms-overflow-style: none; -moz-box-sizing: border-box; box-sizing: border-box; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* remove line to customize scrollbar in iOs */ &::-webkit-scrollbar { width: 0; height: 0; } }

.baron__track { display: none; position: absolute; top: 0; right: 0; bottom: 0; }

.baron._scrollbar .baron__track { display: block; }

.baron__free { position: absolute; top: 0; bottom: 0; right: 0; }

.baron__bar { display: none; position: absolute; right: 0; z-index: 3; width: 10px; background: black; opacity: .4; @include transition(opacity); &:hover { opacity: .7; &:active { opacity: .7; } } }

.baron { &._scrollbar .baron__bar { display: block; visibility: visible; pointer-events: auto; }

}

.baron__control { display: none; }