Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Overscroll visual issue on Safari #559

Closed
lixiaoyan opened this issue Sep 11, 2023 · 7 comments
Closed

Overscroll visual issue on Safari #559

lixiaoyan opened this issue Sep 11, 2023 · 7 comments
Labels
🍎 bug

Comments

@lixiaoyan
Copy link

Describe the bug
The scrollbar has a visual issue with the overscroll behavior on Safari
This issue does not appear if the overscroll behavior is disabled (overscroll-behavior: none)

To Reproduce
Open Safari and goto https://kingsora.github.io/OverlayScrollbars/example/overlayscrollbars/

Expected behavior
The scrollbar should not jump

Examples

Screen.Recording.2023-09-11.at.12.42.55.PM.mov

Environment

  • Used Operating System(s): macOS 13.5.1
  • Used Browser(s) (with version): Safari 16.6
@KingSora
Copy link
Owner

KingSora commented Sep 11, 2023 •
edited
Loading

@lixiaoyan Thanks for this report!

Unfortunately I'm not owner of a mac, so I'm unable to test those things. (BrowserStack isn't much of a help here because they have configured the system to not have overscroll animations).

Do you mind helping me with fixing this issue in the best possible way? I would need to know when exactly the faulty behavior dissappears:

  1. adding overscroll-behavior: none to the selector [data-overlayscrollbars="host"]
  2. adding the overscroll-behavior: none to the selector [data-overlayscrollbars-viewport]

Also does this happen on the body element as well?

@lixiaoyan
Copy link
Author

  1. Adding overscroll-behavior: none to the selector [data-overlayscrollbars="host"] has no effect on the behavior and does not resolve the issue.
  2. Adding overscroll-behavior: none to the selector [data-overlayscrollbars-viewport] disables the overscroll effect completely and resolves the issue.
Screen.Recording.2023-09-11.at.7.05.19.PM.mov

This issue also affects the body scrolling.

@lixiaoyan
Copy link
Author

The 1.x version does not have this problem.

@KingSora
Copy link
Owner

@lixiaoyan Thanks! I'll look further into this issue!

@KingSora
Copy link
Owner

@lixiaoyan I've fixed this issue in version v2.3.1

In case this issue still exists please don't hesitate to reach out to me in this or a new issue

This was referenced Sep 18, 2023
Closed
Closed
Closed
@lixiaoyan
Copy link
Author

Hi, I tried the latest version, and it appears to be fixed for elements other than the body. This is still an issue with window scrolling.

Screen.Recording.2023-09-18.at.3.15.22.PM.mov

@lixiaoyan
Copy link
Author

lixiaoyan commented Sep 18, 2023 •
edited
Loading

It might be a bug in WebKit:
w3c/csswg-drafts#6299
https://bugs.webkit.org/show_bug.cgi?id=206227

Screen.Recording.2023-09-18.at.3.17.41.PM.mov

@dependabot dependabot bot mentioned this issue Sep 18, 2023
Merged
github-actions bot pushed a commit to EasyPost/easy-ui that referenced this issue Sep 18, 2023
@dependabot
build(deps): Bump overlayscrollbars from 2.3.0 to 2.3.1 (#622)
3036489 
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>
This was referenced Sep 18, 2023
Closed
Closed
Closed
Merged
github-actions bot pushed a commit to EasyPost/easy-ui that referenced this issue Sep 19, 2023
@dependabot
build(deps): Bump overlayscrollbars from 2.3.0 to 2.3.1 (#631)
cac1d05 
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>
@dependabot dependabot bot mentioned this issue Sep 20, 2023
Merged
github-actions bot pushed a commit to EasyPost/easy-ui that referenced this issue Sep 20, 2023
@dependabot
build(deps): Bump overlayscrollbars from 2.3.0 to 2.3.1 (#636)
9eef443 
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>
This was referenced Sep 20, 2023
Closed
Merged
Closed
Closed
Closed
Closed
Closed
This was referenced Sep 26, 2023
Closed
Closed
@dependabot dependabot bot mentioned this issue Oct 6, 2023
Closed
This was referenced Oct 23, 2023
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
@dependabot dependabot bot mentioned this issue Oct 30, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🍎 bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lixiaoyan @KingSora