search

Grsmto / simplebar

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
http://grsmto.github.io/simplebar/
MIT License
6.07k stars 533 forks source link

Horizontal bars are sometimes needlessly showing #231

Open Rush opened 6 years ago

Rush commented 6 years ago

The broken behavior can be observed on https://grsmto.github.io/simplebar/

I can also observe it with latest beta

Current Behavior

Expected behavior

Horizontal bar to not show

Reproducible example

Open https://grsmto.github.io/simplebar/

Suggested solution(s)

No idea

Additional context

Software Version(s)
SimpleBar Same as on https://grsmto.github.io/simplebar/
Browser Version 70.0.3538.77 (Official Build) (64-bit)
npm/Yarn None
Operating System Linux / openSUSE Tumbleweed
Grsmto commented 6 years ago

Interesting. I'm not having this. That might be a Linux + Chrome specific issue. Unfortunately I don't have Linux and it's not available on Browserstack so I can't test :/

Demivan commented 6 years ago

I encountered similar issue with IE 10. I fixed it with fix similar to #174. This one could be same issue. I think cause is that size calculations are not exact in some browsers if container or content sizes are not integers in pixels.

ChrisSympatient commented 5 years ago

unbenannt unbenannt2

I have the same issue. In debug mode, getting rid of the width: inherit seems to fix it, but since this is coming from [data-simplebar] I cant change it, or am I getting something wrong here?

Thankful for any advice on how I can get the result of the second screenshot

testable here ;) www.hinz.design

i love simplebar

Grsmto commented 5 years ago

@ChrisSympatient you are setting overflow-y: scroll, that breaks the plugin. Also your own css is added before SimpleBar's css, that's why your width is overriden.

ChrisSympatient commented 5 years ago

@Grsmto Thank you very much for the quick reply!!! :)

I commented / overflow-y: scroll;/ out (style.css Line 1480)

and changed the css rel in the index file so simplebar is first:

<link rel="stylesheet" type="text/css"  href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">

...

But now the formating of the form is fully ***ed :D

unbenannt

My endless programming skills are quiet limited :D i guess Im missing out on major things here.

ChrisSympatient commented 5 years ago

!!! EDIT: ok, weirdly I got it to work. I changed the order off the css rel like mentioned above and suggested by you. But removing the "overflow-y: scroll" broke the form. Since I changed the rel order but kept in the "overflow-y: scroll" everything works like intended.

Do I wonder why? mmmh probably. But since its working now I shout out a big thank you to you Mr! :) People taking time to help each other. Simply amazing

Grsmto commented 5 years ago

Yeah that's the height: inherit from SimpleBar breaking your layout (we might not need this property...). Apply height: auto to your div, that will fix it. But you need to remove overflow-y: scroll or you will necessarily have the scrollbar track visible.

ChrisSympatient commented 5 years ago

Oh but I want the y bar to show. Because when a user enters a really long message and receives my "fake reply" the content will scroll down. Since the vertical scrollbar is there already, I dont have to bother rearranging the content. My concern was regarding the yellow marked horizontal scroll bar shown in the first screenshot i posted.

So actually everything is working just fine now, thanks to your advice rearranging the css rel order. Im just worried I actually miss your point and sound like a douche.

Demivan commented 5 years ago

@Grsmto It is reproduced not only on Linux: https://github.com/Grsmto/simplebar/issues/231#issuecomment-439344211 default Reproduced on IE11 on https://grsmto.github.io/simplebar/ by setting container width to 171.78px

Grsmto commented 5 years ago

I don't get it, just tested on browserstack now and I can't reproduce this :/

screenshot 2018-11-20 at 10 29 28

Any other things you're doing to get this? Like browser zoom level etc.? What Windows version?

Demivan commented 5 years ago

Went to check my zoom level but now I cannot reproduce it too :/ IE: 11.345.17134.0 Windows 10: 1803

Rush commented 5 years ago

Can dpi affect this?

Grsmto commented 5 years ago

By the way it's worth noting that you can work-around this issue by explicitly setting overflow-x: hidden to your element, if you don't need horizontal scroll at all of course.

akvaliya commented 5 years ago

I am facing the same issue with google chrome 71.0.3578.98 (Official Build) (64-bit) in windows 10. Did anyone found any solution?

adjourn commented 5 years ago

Im able to reproduce this but it seems to happens in very special conditions. For me it's when I zoom back and forth a lot and even then it only happens sometimes. Tried both Windows 10 and Ubuntu, Chrome and Chromium respectively.

State of the world when it happens:

Mount

1

Wrapper

2

Observer

3

Mask

4

Offset

5

Content

6

Actual content

7

Placeholder

8

Track

9

Scrollbar

10

Grsmto commented 5 years ago

That's awesome @adjourn thanks for this! I'll take a look when I can but it seems like it's some sub-pixel calculation issue and hopefully that should be easy to fix with a safeguard of ~1px in the calculation!

akvaliya commented 5 years ago

@Grsmto I tried in different system & found out that when windows 10 system resolution (Scale & layout) is 150% then horizontal scrollbar is always visible. Maybe this will help you identify the issue.

Grsmto commented 5 years ago

Hey guys,

FYI I just released simplebar@4.0.0-alpha.0, I would appreciate if you could test that out and let me know if that fixes the issue! 🤞 Thanks!

briice commented 5 years ago

Hi @Grsmto, I'm using simplebar@4.0.0 and I still see this issue on Win10/Edge running in Fusion on a Mac. Not sure what's causing it though, and I haven't found an easy fix yet. For example if I set width: 99% and select/deselect it a couple times, sometimes it disappears, but it mostly doesn't.

scrollbars
Grsmto commented 5 years ago

@briice if you could provide a reproductible case using the jsfiddle template that would help a lot to debug this issue further: https://jsfiddle.net/Grsmto/57obe5w2/1/ Thanks!

kakigorimochi commented 5 years ago

Is this fixed? I am also having problem with it on edge. There is nothing to scroll from yet the scrollbar is visible. It is not visible on other browsers.

image

I am using ^3.1.0-beta.2

kakigorimochi commented 5 years ago

Updated to 4.1.0

Now it just sticks up top. image

AleCaste commented 5 years ago

I am experiencing the same issue on both Edge and IE11, but for vertical scrollbar. They are shown even when there is no need. I noticed the size calculations are not accurate to the pixel when there are elements in the scrollable area with margins/paddings. Maybe something like this would help with subpixels differences:

this.axis.y.isOverflowing = Math.floor(this.contentWrapperEl.scrollHeight) > Math.ceil(this.contentWrapperEl.offsetHeight)

Likewise for horizontal axis.

St-Permiakov commented 4 years ago

I encountered same issue (needless scroll) on IE 11. The "blue browser" is calculating width funny: on specific window widths (e.x. 1276) I get scrollWitdh: 1090 offsetWidth: 1089 and on window width 1260 it's already accurate: scrollWitdh: 1076 offsetWidth: 1076.

What's even more surprising, there's no native scrollbar in both cases, but simplebar is placing its scroll in the first one.

I don't know sandboxes still supporting IE, so can't provide you with working example just yet.

I guess IE just rounds offsetWidth and scrollWidth differently and there's not much to be done, but... Has someone dealt with this before?

AlexanderShchedrin commented 6 months ago

I noticed a similar problem in FireFox. When calculating the value from scrollHeight, it is greater than offsetHeight. Because of this, scroll appears. This happens when scrolling horizontally. FireFox version is 125.0.3 64 bit

this.axis.y.isOverflowing = contentElScrollHeight > contentWrapperElOffsetHeight;

image

image

UPD: Fixed it with a little hack. Increased the line-height to 1.3. After that, the dimensions are obtained correctly.