Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iOS double scrollbar

See original GitHub issue

Describe the bug

Two vertical scrollbars (native + simplebar) on iOS Chrome and Safari.

To Reproduce

Seems to happen no matter the parent container, or styling, or props. It happens on the simplest reproducible example. I’ve tried using code from the demo, I’ve tried different variations, removing parent containers. Everything.

Additional context

Using simplebar-react
The bug does not happen on the live simplebar demo.
I don’t believe I have any global styles overriding.

Is the live demo using simplebar-react? Possible this is an issue with that package directly?

import SimpleBar from 'simplebar-react'
...
  <SimpleBar style={{ height: '300px' }}>
          {[...Array(50)].map((x, i) => (
            <p key={i} className="odd">
              Some content
            </p>
          ))}
        </SimpleBar>

Your environment

Software	Version(s)
SimpleBar	latest
Browser	chrome, iOS
npm/Yarn	yarn latest
Operating System	iOS

Issue Analytics

State:
Created 4 years ago
Reactions:5
Comments:5 (1 by maintainers)

Top GitHub Comments

14reactions

knightMashcommented, Feb 17, 2020

hey @barnu5, as I said you won’t see those double scrollbars on that codepen, as I have already tested it. but here is another development that I found. In my css if I add this
::-webkit-scrollbar { display: none; } I don’t see the default scrollbar then, and only custom scrollbar is visible as needed. But still not sure why it happened.

0reactions

barnu5commented, Feb 17, 2020

Hi @knightMash, ah right apologies, that makes sense.

Excellent work! That fixed it for me.