Storybook: 5.1.x scrollbars do not scroll and exhibit strange behavior with external mice

[domyen]

Describe the bug

• Scrolling does not scroll
• Scrollbars remain visible when using an external mouse (i.e., in a desktop setup)

To Reproduce
Steps to reproduce the behavior:

1. Go to Storybook next branch. View the default story or the about page
2. See that scroll bars render strangely on in the default Storybook UI. And notice you cannot scroll on the about page.

Expected behavior

• I expect the scrollbar to not have artifacts
• I expect the scrollbar to scroll

Screenshots
Image of broken scrollbar:

Video recording of scrolling not working on about page:

System:

• OS: Mac OSX Mojave
• Device: Macbook Pro 2018
• Mouse: Microsoft Intellimouse
• Browser: Chrome
• Version: 5.1.X

Additional context
This regression was introduced in 5.1.x. I've seen the visible scrollbars happen when simplebar is broken -- perhaps the update to simplebar-react 1.0-alpha could have caused this? This behavior does not exist in my 5.0.x Storybooks.

[ymcnicoll]

This behavior also shows on Windows machines.

This started to happen when I upgraded from alpha.31 to alpha.40

[Grsmto]

Hi,
SimpleBar maintainer here, I'll look into this, I think this is a bug on our side. I think I know the cause but I'm still unsure on why this is happening as the usage in Storybook seems quite straightforward.

Video recording of scrolling not working on about page:

After debugging quickly this, it seems like it's unrelated to SimpleBar and it's a z-index issue. An element on top is blocking any mouse interaction.

[Grsmto]

So after investigation, this is because SimpleBar V4 has CSS changes that have not been updated in Storybook. It's just that you have hardcoded the core CSS of SimpleBar in this file so the CSS in there is outdated!

You should just have to update the CSS to the latest SimpleBar version and that should work again fine.

Thanks for using SimpleBar, please don't hesitate to file an issue in our repo if you encounter anything!

[shilman]

Thanks so much @Grsmto ! Much appreciated!

[artyomtrityak]

Having similar issue on Mac 5.1-beta0

[domyen]

Thanks @Grsmto 🙏. I totally forgot about that hack 😅, will have to figure out why we ended up doing that - a setting-specific reason I'm sure.

Edit: I remember now, we want to pass the user's theme vars to Simplebar. Is there a way to override certain styles in simplebar?

[domyen]

Tried to debug this using @Grsmto's suggestion to update the CSS; that ended up causing different layout bugs. @ndelangen can you lend a hand here?

Check out ScrollArea stories to isolate the issue.

On next I tried applying the styles to Global like so:

<Global
      styles={css`...styles pasted from simplebar.css v4.0 for test purposes`} /> 

The horizontal scrolling works. It does not work with vertical scrolling by itself or in combination with horizontal scrolling

[ndelangen]

I'm on it

[ndelangen]

@artyomtrityak are you on our discord by any chance?
https://discord.gg/sMFvFsG

[Grsmto]

Make sure to apply the right css properties on the host (element on which you apply SimpleBar). As it doesn't do it for you anymore (that's a breaking change on V4).
So for ex for the left sidebar it won't work unless you define height: 100%; on the element.

Edit: reason is that before SimpleBar has height: inherit and doesn't anymore.
So if you don't apply dimensions to the host element, it just overflows from its parent. Like normal CSS behaviour.
What you can do is apply max-height: inherit; to have the previous behaviour or just apply the CSS directly on the host element instead of having a wrapper like it's done at the moment. Hope this help!

[Grsmto]

If you guys struggle let me know and I could work on a PR!
I had a quick look and was able to fix it with the tips I provided in my previous comment.

[ndelangen]

@Grsmto I'm running into a problem where (at least on my machine, I can't scroll all the way to the right, when scrolling on both axis:

I can reproduce this on http://grsmto.github.io/simplebar/examples too

[Grsmto]

@ndelangen what we can see in the video is actually the "normal" behaviour. If you check when you're testing the "Both axis + padding native" it's having the exact same behaviour.
If you apply a padding inside an overflow: auto element, the browser does not take that padding into account for the padding-right. I'm not sure exactly why but that's the native CSS behaviour!

If you want to fix this "issue" you can just apply the padding to an inner element instead of applying it on your SimpleBar host element.

[ndelangen]

browsers suck

[ndelangen]

@domyen or anyone else, are you able to confirm the issue is resolved in my PR?
https://github.com/storybooks/storybook/pull/6785

[artyomtrityak]

@ndelangen yes i am :)

[domyen]

Added theming support back in #6794. can @ndelangen or anyone confirm 🙏

[shilman]

w00t!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-beta.1 containing PR #6794 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.