Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrollbar content not appearing in Safari when scrollbar height is 100% #158

Open
z9170 opened this issue Oct 5, 2020 · 3 comments
Open

Comments

@z9170
Copy link

z9170 commented Oct 5, 2020

I have a react-scrollbars-custom scrollbar implemented around a

tag with some text in which the width and height parameters are auto and 100% respectively. This works absolutely fine in browsers such as Firefox and Chrome but there seems to be an issue with safari in which the text inside the scrollbar component does not appear on the page. The text is present within the component still and can be observed by selecting the ScrollbarsCustom-Content class using the safari dev tools.

For the setup, I have a react component whose render function is as follows:
render() { return ( <div> <Scrollbar style={{ width: 'auto', height: '100%'}}> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst quisque sagittis. Fringilla est ullamcorper eget nulla. Id leo in vitae turpis massa sed elementum tempus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Consequat interdum varius sit amet mattis vulputate enim nulla. Maecenas pharetra convallis posuere morbi leo urna molestie. Facilisi morbi tempus iaculis urna id. Malesuada bibendum arcu vitae elementum curabitur vitae. Nisl suscipit adipiscing bibendum est ultricies. Duis at consectetur lorem donec massa sapien. Mattis pellentesque id nibh tortor id aliquet lectus proin. Condimentum id venenatis a condimentum vitae sapien. Mattis vulputate enim nulla aliquet porttitor lacus luctus. Lacus suspendisse faucibus interdum posuere. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Augue lacus viverra vitae congue eu consequat ac felis. Faucibus nisl tincidunt eget nullam non. Erat velit scelerisque in dictum non consectetur.</p> </Scrollbar> </div> )}

I have some CSS on the div element but this is just a "flex: 1 1 auto;"
I have also tried specifying different percentages for the scrollbar height but Safari does not like any of them.

  • OS: MacOS
  • Browser (vendor and version): Safari, working fine on Firefox and Chrome
  • React: 16.13.1
  • react-scrollbars-custom: ^4.0.25
  • Did this worked in the previous package version?:It doesn't appear to
@xobotyi
Copy link
Owner

xobotyi commented Oct 5, 2020

Sadly Im unable to debug safari since I dont have an access to any Mac

@z9170
Copy link
Author

z9170 commented Oct 6, 2020 via email

@trevlar
Copy link

trevlar commented Mar 10, 2021

I just submitted a somewhat related issue. The problem shows up in the example code.

#170

Get a good look at the attached screenshot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants