react-scrollbars-custom icon indicating copy to clipboard operation
react-scrollbars-custom copied to clipboard

Display none causes scrollbar to forget overall inner width

Open makivlach opened this issue 5 years ago • 0 comments

Do you want to request a feature or report a bug? A bug

What is the current behavior?

The scrollbar is showing incorrect width after reappearing from display: none.

If current behavior is a bug, please provide the steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-scrollbars-custom. Paste the link to your JSFiddle or CodeSandbox example below:

  1. Apply display: none style to the scrollbar component
  2. Remove display style
  3. The component forgets overall inner width.

If you move the scrollbar it recalculates overall inner width to the correct value (so it might perhaps be some kind of initialization problem?).

The bug is better portrayed by the following screenshots

Wrong width: image

Correct width after moving scrollbar: image

Live demo: https://codesandbox.io/embed/eager-kilby-z8d86 p.s.: If you don't see anything wrong try refreshing it a few times

What is the expected behavior?

The scrollbar should have the same width even after hiding/showing.

Which versions of react-scrollbars-custom, React, and which browser / OS are affected by this issue? Did this work in previous versions of react-scrollbars-custom?

Which versions of react-scrollbars-custom: v4.0.5 React: 16.8.6 Browser: Chrome OS: Linux Mint 19 Did this work in previous versions of react-scrollbars-custom: no idea

makivlach avatar Jun 06 '19 20:06 makivlach