search

Athou / commafeed

Google Reader inspired self-hosted personal RSS reader.
https://www.commafeed.com
Apache License 2.0
2.82k stars 377 forks source link

Fix bug with Safari #1386

Closed SConaway closed 5 months ago

SConaway commented 6 months ago

This PR fixes #1168 by allowing the root element to be scrollable. Simple fix, just let #root overflow as needed and things seem to work fine.

Tested on macOS Safari as well as iPhone Safari.

Caused by

html,
body {
  overscroll-behavior: none;
}

in /commafeed-client/src/main.css. Bug only occurs when the sidebar is scrollable.

Athou commented 6 months ago

Thank you! As I do not own any Apple device I was not able to find a solution to this issue.

Your fix has an undesirable side effect though: the header hides the scrollbar.

Without the fix image

With the fix image

SConaway commented 6 months ago

I see that. Do you have any suggestions for how to solve this issue then? I'm happy to test anything and everything that you can think of.

Alternatively, when the website is added to the Home Screen as an app (as I have it, and I'm sure others), pull-to-refresh is automatically disabled, and so the overscroll-behavior: none is unneeded. On modern Safari iOS, the pull-to-refresh behavior is hard to trigger, so I wonder how much of an issue it would be.

Athou commented 5 months ago

Do you have any suggestions for how to solve this issue then?

None :/

On modern Safari iOS, the pull-to-refresh behavior is hard to trigger, so I wonder how much of an issue it would be.

So what you're saying is that applying overscroll-behavior: none; only if the browser is not Safari would solve the issue? https://github.com/duskload/react-device-detect could be used to load a new DisablePullToRefresh component that would load the css rule https://stackoverflow.com/a/40065474/

Athou commented 5 months ago

I did this in https://github.com/Athou/commafeed/commit/cd86947e64136c2316e1cf48160ef49f48e64aa4, let me know if it works for you.

SConaway commented 5 months ago

Super sorry for the late response:

So what you're saying is that applying overscroll-behavior: none; only if the browser is not Safari would solve the issue?

The issue seems to only occur on Safari, both mobile or desktop.

I'll close this and will respond in the issue once I test it.