-
-
Notifications
You must be signed in to change notification settings - Fork 214
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
autohide: leave requires double tap on touch devices #285
Comments
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? |
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. |
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 |
I am using the react version. |
@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 |
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! |
@beeteam368 I'll give my best :) |
Thanks! Wish you a good day! |
@KingSora hello mr king. is there any progress on this issue? this still occurs on iOS |
@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? |
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 :) |
@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.. |
@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:
I'll keep trying to get this consistently failing |
@theo-staizen thanks a lot! :) |
Can you please try |
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. |
@alvarolb thanks for the update, do you mind creating an minimal reproducable example with which I could try to solve the issue? :) |
Hi there. 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:
Once you have the above, replace where you had the OverlayScrollbarsComponent with ScrollWrapper in your original code. I hope that makes sense. |
@robwheatley Thanks for posting your solution :) Just for completeness I would like to add that this solution could cause problems with server side rendering |
@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. |
This issue should be fixed in version |
Bumps [overlayscrollbars](https://github.com/KingSora/OverlayScrollbars/tree/HEAD/packages/overlayscrollbars) from 2.3.0 to 2.3.1. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md">overlayscrollbars's changelog</a>.</em></p> <blockquote> <h2>2.3.1</h2> <h3>Bug Fixes</h3> <ul> <li>Fix direction <code>rtl</code> visual scrollbar handle behavior in browser which support the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline">ScrollTimeline API</a>.</li> <li>Fix double tap behavior for interactive elements on <code>iOS</code> devices if <code>autoHide</code> is <code>leave</code> or <code>move</code>. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/560">#560</a> <a href="https://github.com/KingSora/OverlayScrollbars/discussions/285">#285</a></li> <li>Fix incorrect scrollbar handle calculation when overscroll on safari occurred. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/559">#559</a></li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/KingSora/OverlayScrollbars/commits/HEAD/packages/overlayscrollbars">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=overlayscrollbars&package-manager=npm_and_yarn&previous-version=2.3.0&new-version=2.3.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps [overlayscrollbars](https://github.com/KingSora/OverlayScrollbars/tree/HEAD/packages/overlayscrollbars) from 2.3.0 to 2.3.1. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md">overlayscrollbars's changelog</a>.</em></p> <blockquote> <h2>2.3.1</h2> <h3>Bug Fixes</h3> <ul> <li>Fix direction <code>rtl</code> visual scrollbar handle behavior in browser which support the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline">ScrollTimeline API</a>.</li> <li>Fix double tap behavior for interactive elements on <code>iOS</code> devices if <code>autoHide</code> is <code>leave</code> or <code>move</code>. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/560">#560</a> <a href="https://github.com/KingSora/OverlayScrollbars/discussions/285">#285</a></li> <li>Fix incorrect scrollbar handle calculation when overscroll on safari occurred. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/559">#559</a></li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/KingSora/OverlayScrollbars/commits/HEAD/packages/overlayscrollbars">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=overlayscrollbars&package-manager=npm_and_yarn&previous-version=2.3.0&new-version=2.3.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps [overlayscrollbars](https://github.com/KingSora/OverlayScrollbars/tree/HEAD/packages/overlayscrollbars) from 2.3.0 to 2.3.1. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md">overlayscrollbars's changelog</a>.</em></p> <blockquote> <h2>2.3.1</h2> <h3>Bug Fixes</h3> <ul> <li>Fix direction <code>rtl</code> visual scrollbar handle behavior in browser which support the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline">ScrollTimeline API</a>.</li> <li>Fix double tap behavior for interactive elements on <code>iOS</code> devices if <code>autoHide</code> is <code>leave</code> or <code>move</code>. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/560">#560</a> <a href="https://github.com/KingSora/OverlayScrollbars/discussions/285">#285</a></li> <li>Fix incorrect scrollbar handle calculation when overscroll on safari occurred. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/559">#559</a></li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/KingSora/OverlayScrollbars/commits/HEAD/packages/overlayscrollbars">compare view</a></li> </ul> </details> <br /> <details> <summary>Most Recent Ignore Conditions Applied to This Pull Request</summary> | Dependency Name | Ignore Conditions | | --- | --- | | overlayscrollbars | [> 2.3.1] | </details> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=overlayscrollbars&package-manager=npm_and_yarn&previous-version=2.3.0&new-version=2.3.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
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.
Is there any way to have autoHide: "leave" for non-mobile devices and trigger the touch event on the first tap on mobile?
The text was updated successfully, but these errors were encountered: