search

xobotyi / react-scrollbars-custom

The best React custom scrollbars component
https://xobotyi.github.io/react-scrollbars-custom/
MIT License
841 stars 75 forks source link

Width calculation bug #84

Open jmarceli opened 5 years ago

jmarceli commented 5 years ago

Hi, If you update LIVE DEMO to latest package version 4.0.5 you will see that text is not fully visible. Here is the live exmple https://codesandbox.io/s/rsc-live-example-h34of

This bug is most probably caused by the change from padding: 0.05 to display: table-cell in this commit https://github.com/xobotyi/react-scrollbars-custom/commit/7c2d3b83429d2ed74d696a4e03ead5ae01fb172b

xobotyi commented 5 years ago

What for i've written an issue example?🤦‍♂️

@jmarceli Everything is good for me. What browser do you use?

jmarceli commented 5 years ago

HI, I'm using Google Chrome Version 75.0.3770.90 (Official Build) (64-bit) on Max OS X Mojave and it looks like this:

image

xobotyi commented 5 years ago

@jmarceli ~~Cause there is no possible way for me to test it on macos - check this one pls. https://codesandbox.io/s/rsc-live-example-062ls~~

Have you added sizes translation? Cause without that field enabled display:table-cell shouldn't appear, if translation disabled it still uses padding: .05

jmarceli commented 5 years ago

Hi, when I use translateContentSizesToHolder={false} it doesn't change anything besides padding: 0.05px, but it still looks not as I expect.

image

I will try to find a way to make it look ok and then I will add a solution to that issue (as soon as I will have some spare time).

xobotyi commented 5 years ago

Very weird... Looks like the scrollbar width compensation is turned off =/ Because there is no other reason to content to leak under the scrollbar. Are scrollbars overlay the content/scroller element?

jmarceli commented 5 years ago

No, it's not the compensation. When I remove/hide scrollbar with CSS display: none the content still falls behind the right edge of the scrolling area.

xobotyi commented 5 years ago

Thus a have absolutely no clue what is going on... Try to manually set the left style to 0 for the scroller element and ensure that native scrollbar is still there.

jmarceli commented 5 years ago

I will try to figure that out and return here with some solution

xobotyi commented 5 years ago

@jmarceli HI! Any results?

xobotyi commented 5 years ago

Looks like common linux is affected too.

jmarceli commented 5 years ago

It seems to be still an issue. I've checked demo page https://xobotyi.github.io/react-scrollbars-custom/ and it looks like this:

macosx-chrome

This is taken from Chrome Version 76.0.3809.132 on Mac OS X 10.14, but to be honest I'm no longer tracking this issue as I've changed scrollbars library (sorry).

xobotyi commented 5 years ago

@jmarceli to which one if not secret? It hasnt that issue?

jmarceli commented 5 years ago

https://github.com/KingSora/OverlayScrollbars with react adapter https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react while it is not perfectly documented I manage to make it work pretty well for my project.

KingSora commented 4 years ago

Good day!

I want to contribute to this bug. This bug isn't platform specific but happens if the browser has already overlaid scrollbars (e.g. the native scrollbar-width is 0). You can simulate this behavior on any system with chrome. Go to chrome://flags/ and enable the option 'Overlay Scrollbars': gh

To provide a clue on why this is happening: Your compensation strategy with margin-right: -20px and padding-right: 20px isn't working if the horizontal axis is overflowing.

@jmarceli I'm the author of OverlayScrollbars and I'm glad the plugin is working for you. May I ask you how I could improve the documentation? In my eyes I've done a pretty good job with it, but maybe there are certain thing which are too hidden for new users like you was. Thanks for your input!

vdjurdjevic commented 4 years ago

@KingSora I think I have a similar issue (using your lib with React). I have a grid layout with a column template auto 1fr auto. My scrollable element is in the middle. Inside the scrollable element, I have expansion panels each having number of cards. When all panels are collapsed, the element width is good. Here is a picture: image

Now, if I expand the last panel which fits in the viewport (not causing overflow), width increases for some reason. Here is a picture (notice how third column is clipped): image

And if I expand two panels, there is enough content to cause overflow, everything is ok. Here is a picture:

image

Any ideas why is this happening?

KingSora commented 4 years ago

@vdjurdjevic please open a issue in my repo for this case, I don't really wanna spam someone others issues with unrelated stuff to his project.