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

[z9170]

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]

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

[z9170]

Hi there, No worries. Thank you for your quick reply :) Kind Regards, Zak

…

On 5 Oct 2020, at 17:51, Anton Zinovyev ***@***.***> wrote:  Sadly Im unable to debug safari since I dont have an access to any Mac — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[trevlar]

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

#170

Get a good look at the attached screenshot.