Simplebar: iOS double scrollbar

[barnu5]

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

[Grsmto]

Hi,
Yes the website and some of the examples are using SimpleBar. I just tested again on iOS simulator and it works just fine.
You're saying that the issue doesn't happen on the live demo but before you said it's broken even on "the simplest reproducible example" so I don't really understand.

If you could provide reproductible example that might help (you can use https://codesandbox.io/s/dreamy-brahmagupta-clrlo)

[knightMash]

Hi @Grsmto , I have also encountered this problem. This can only be seen on a actual iphone device having version 13 or greater. I can share a codepen link just for the example, but it is not visible on codepen, but if you can create a testing server of some kind and watch it on iphone actual device safari browser having software versions 13 or greater, then two scrollbars are visible. Here's is the codepen link

[barnu5]

Hi @Grsmto, I don't actually see the double scrollbar on that codepen, but I googled and found a random simplebar example which repoduces the issue: https://codepen.io/joseRio/pen/omQRLq

[knightMash]

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.

[barnu5]

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

Excellent work! That fixed it for me.