OSX Safari scrollbar invisible

[alanontheweb]

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

[Diokuz]

Demo page works fine for me in Mac safari.

Are you sure the same example works fine in Chrome, and did not work in Safari? _scrollbar must be added when scrolling is possible.

Also, there may be some problems with MorphDOM – do you use that library?

If nothing helps, please, make jsfiddle example which works in Chrome, but not in Safari.

[alanontheweb]

Right, I know the demo page works fine in Safari. It's something specific to my build. And yes it works in Chrome, but not Safari (latest versions of both).

I'm not loading MorphDOM separately. Just Baron. Should I be? I'll set up a codepen today for you to see. Thank you.

[alanontheweb]

Here's the codepen. I tried to remove as much library code and unnecessary stuff for the demo, but might not have gotten it all out. Thanks again for your help.

http://codepen.io/anon/pen/VaoXmr

[alanontheweb]

@Diokuz Any luck? I appreciate the help.

[Diokuz]

Well, in your codepen example baron didnt work at all. Because there is no baron__scroller or baron__track html element.

[alanontheweb]

No, it works for me. I append those with jquery only if a scrollbar is detected. I tried removing that code and adding it to the HTML to simplify things (because there might have been an issue with my code), but it didn't seem to change anything.

It's probably not getting appended because you already have 'overflow' scrollbars (thus, it's not running the script to initialize baron or append the HTML). Let me tweak it so it runs no matter what (or you can turn on scrollbars in your system preferences (under General, always show scrollbars, on OSX).

[alanontheweb]

Okay, I commented out the conditional that checks for a scrollbar width, so now it should run even on browsers with transparent scrollbars (confirmed). The Baron code starts at line 1502 in the JS and in line 19 on the CSS.

Also, in Safari, I see the baron scrollbar, but it's not being updated in size or position.

[Diokuz]

Thats really interesting! It is a browser bug (???). Body has wrong scrollHeight (just +15 px above its clientHeight) and scrollTop (always zero) values.

I need more time to catch that.

You can try to make scroller inside a body: two more divs inside the body.

Its worked for me:

<div class="baron baron__root baron__clipper">
  <div class="baron__scroller">
<p>Lorem ipsum ...

[Diokuz]

I think this is it https://bugs.chromium.org/p/chromium/issues/detail?id=34224

2010!

[alanontheweb]

Oh man! Well, thanks for looking into it. I tried adding the two divs (both on my code, and the codepen) and it didn't seem to work properly. If you could fork it and show me how it should be done? Maybe I have conflicting CSS or something. And ideally, it would work on the body, as we have scroll events that are tied to them :(

Hope you can resolve it! I like Baron over other scripts because it seems to work well in most conditions, with this one exception, of course.

[Diokuz]

Here working codepen: http://codepen.io/Diokuz/pen/vKEBQO

[Diokuz]

fixed in baron@2.2.5