search

KingSora / OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
https://kingsora.github.io/OverlayScrollbars
MIT License
3.78k stars 214 forks source link

Overscroll visual issue on Safari #559

Closed lixiaoyan closed 11 months ago

lixiaoyan commented 12 months ago

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

https://github.com/KingSora/OverlayScrollbars/assets/1610614/5c320373-bb69-4de4-bbbc-44a784c5c0bc

Environment

KingSora commented 12 months ago

@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 commented 12 months ago
  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.

https://github.com/KingSora/OverlayScrollbars/assets/1610614/11331a4a-2641-4686-b9aa-418958ed144d

This issue also affects the body scrolling.

lixiaoyan commented 12 months ago

The 1.x version does not have this problem.

KingSora commented 12 months ago

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

KingSora commented 11 months ago

@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

lixiaoyan commented 11 months ago

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.

https://github.com/KingSora/OverlayScrollbars/assets/1610614/cad62099-9c6b-4e9e-9113-3ec904978a03

lixiaoyan commented 11 months ago

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

https://github.com/KingSora/OverlayScrollbars/assets/1610614/38c88da1-f925-420b-8b35-1ea8b63ae26c