autohide: leave requires double tap on touch devices

[itshallrun]

Hey,

I am working on a cross plattform web app. The issue is, on touch devices, the autoHide: "leave" option requires a double tap to trigger the touch event. The first tap will show the scrollbar, and the second tap will actually trigger the touch event underneath.

touchSupport is active in my options.

                    resize: "none",
                    sizeAutoCapable: true,
                    paddingAbsolute: true,
                    scrollbars: {
                        visibility: "auto",
                        autoHide: "leave",
                        autoHideDelay: 400,
                        dragScrolling: true,
                        clickScrolling: false,
                        touchSupport: true,
                    },

Is there any way to have autoHide: "leave" for non-mobile devices and trigger the touch event on the first tap on mobile?

[KingSora]

Good day! @itshallrun

With "trigger the touch event on the first tap" you mean the possibility to scroll, or the possibility to interact with the scrollbars?

[itshallrun]

I mean, if there are some elements in a scrollable container, then the first tap will show the scrollbars (which are hidden by default) and the second tap will trigger the onClick / touch event of the touched element. So the scrollbars are kind of blocking the content from being triggered on the first tap.

[KingSora]

Alright.. The touched elements are they below the actual scrollbars, or does the position of the element doesn't matter?

What OS, device and browser are you using? Does this only happen with the autohide: leave option? Can you trigger it also on desktop devices somehow?

[itshallrun]

I am using the react version. I could test it on an Ipad pro. It is an issue for autohide:leave only. The position doesn't matter. Whenever I tap in the Scrollbars container, the first tap always triggers the visibility of the scrollbars. On the desktop, the behavior is as desired. The scrollbars are hidden until the scrollbars container is hovered. And they disappear when the container is left.

[KingSora]

@itshallrun alright, I'll take a look into it as soon as I have time.. I don't have a iPad, so I'll need some time to find a way to reproduce it

[beeteam368]

Hello KingSora,

Thanks for great library!

I tested it very thoroughly on the iPhone.

I confirm that this is a problem when using on iOS.

Please review and fix it when possible!

Best Regards!

[KingSora]

@beeteam368 I'll give my best :)

[beeteam368]

@beeteam368 I'll give my best :)

Thanks! Wish you a good day!

[theo-staizen]

@KingSora hello mr king. is there any progress on this issue? this still occurs on iOS

[KingSora]

@theo-staizen I have it on my backlog, but I couldn't reproduce it until now.. is it possible to create an video or something like that?

[theo-staizen]

I'll get something to you asap (the page we have is under NDA, so I'm trying to make a clean example). Btw you should be able to request free browserstack access for this project: https://www.browserstack.com/open-source for you to be able to test on devices you dont own. it's better than nothing :)

[KingSora]

@theo-staizen thanks a lot! I've tried it with browserstack already (btw. huge thanks to them, many bugs could be only solved cause of that), but I still wasn't able to get the described problem..

[theo-staizen]

@KingSora I spent a bit more time setting it up a codesandbox, but the problem seems to be intermittent and only happens under these conditions:

• Only happens under React, which makes me believe it is caused by React's synthetic events.
• Only happens when the scroll container (or window) loses focus

I'll keep trying to get this consistently failing

[KingSora]

@theo-staizen thanks a lot! :)

[KingSora]

Can you please try v2 and confirm whether this issue still persists? :)

[alvarolb]

Yes, I confirm that the issue is still present on 2.1.0.

The first touch displays the current scroll, and the second lets you click on the link.

[KingSora]

@alvarolb thanks for the update, do you mind creating an minimal reproducable example with which I could try to solve the issue? :)

[robwheatley]

Hi there. First off @KingSora - loving your work!

Just to add to this - I've also just hit the same problem and came across this page looking for a solution. My guess is that it's down to the fact that iOS doesn't like hovers. Anything with a hover effect on it needs a double tap in iOS, and I assume you have a hover somewhere looking for the mouse hover on auto hide.

Anyway - I hacked a work-around to get me going - at least for now. No idea if it's any good, but it only took 2 mins and it seems to work.

I installed react-device-detect (something I have used before) and then created a new component that uses the fact that you are on a mobile device to skip using OverlayScrollbars. The scrollbars do what I want them to do on iOS out of the box anyway.

Kinda like this:

import { isMobile } from 'react-device-detect';

function ScrollWrapper({ children }) {

  if (isMobile) {
    return children
  } else {
    return (
      <OverlayScrollbarsComponent
        options={{ scrollbars: { autoHide: 'leave', autoHideDelay: 500 } }}
      >
        {children}
      </OverlayScrollbarsComponent>
    )
  }
}

Once you have the above, replace where you had the OverlayScrollbarsComponent with ScrollWrapper in your original code.

I hope that makes sense.

[KingSora]

@robwheatley Thanks for posting your solution :)

Just for completeness I would like to add that this solution could cause problems with server side rendering

[robwheatley]

@KingSora Thanks for the heads-up. In my case, I don't need to worry as I'm not doing any SSR ;-). Worth noting though.

[KingSora]

This issue should be fixed in version v2.3.1.