diff --git a/commafeed-client/package-lock.json b/commafeed-client/package-lock.json index 3ca6dd5f..965f2114 100644 --- a/commafeed-client/package-lock.json +++ b/commafeed-client/package-lock.json @@ -30,6 +30,7 @@ "react": "^18.2.0", "react-async-hook": "^4.0.0", "react-contexify": "^6.0.0", + "react-device-detect": "^2.2.3", "react-dom": "^18.3.1", "react-draggable": "^4.4.6", "react-ga4": "^2.1.0", @@ -7653,6 +7654,18 @@ "node": ">=6" } }, + "node_modules/react-device-detect": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz", + "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==", + "dependencies": { + "ua-parser-js": "^1.0.33" + }, + "peerDependencies": { + "react": ">= 0.14.0", + "react-dom": ">= 0.14.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -9178,6 +9191,28 @@ "node": ">=14.17" } }, + "node_modules/ua-parser-js": { + "version": "1.0.38", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.38.tgz", + "integrity": "sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + }, + { + "type": "github", + "url": "https://github.com/sponsors/faisalman" + } + ], + "engines": { + "node": "*" + } + }, "node_modules/ufo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz", diff --git a/commafeed-client/package.json b/commafeed-client/package.json index b7d9b842..7e5634cc 100644 --- a/commafeed-client/package.json +++ b/commafeed-client/package.json @@ -36,6 +36,7 @@ "react": "^18.2.0", "react-async-hook": "^4.0.0", "react-contexify": "^6.0.0", + "react-device-detect": "^2.2.3", "react-dom": "^18.3.1", "react-draggable": "^4.4.6", "react-ga4": "^2.1.0", diff --git a/commafeed-client/src/App.tsx b/commafeed-client/src/App.tsx index 45d2393a..d66f26f8 100644 --- a/commafeed-client/src/App.tsx +++ b/commafeed-client/src/App.tsx @@ -8,6 +8,7 @@ import { redirectTo } from "app/redirect/slice" import { reloadServerInfos } from "app/server/thunks" import { useAppDispatch, useAppSelector } from "app/store" import { categoryUnreadCount } from "app/utils" +import { DisablePullToRefresh } from "components/DisablePullToRefresh" import { ErrorBoundary } from "components/ErrorBoundary" import { Header } from "components/header/Header" import { Tree } from "components/sidebar/Tree" @@ -29,6 +30,7 @@ import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage" import { RegistrationPage } from "pages/auth/RegistrationPage" import { WelcomePage } from "pages/WelcomePage" import React, { useEffect } from "react" +import { isSafari } from "react-device-detect" import ReactGA from "react-ga4" import { Helmet } from "react-helmet" import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom" @@ -193,6 +195,11 @@ export function App() { + {/* disable pull-to-refresh as it messes with vertical scrolling + safari behaves weirdly when overscroll-behavior is set to none so we disable it only for other browsers + https://github.com/Athou/commafeed/issues/1168 + */} + {!isSafari && } diff --git a/commafeed-client/src/components/DisablePullToRefresh.tsx b/commafeed-client/src/components/DisablePullToRefresh.tsx new file mode 100644 index 00000000..d8708103 --- /dev/null +++ b/commafeed-client/src/components/DisablePullToRefresh.tsx @@ -0,0 +1,15 @@ +import { Helmet } from "react-helmet" + +export const DisablePullToRefresh = () => { + return ( + + + + ) +} diff --git a/commafeed-client/src/main.css b/commafeed-client/src/main.css index 0fdc6fd7..e69de29b 100644 --- a/commafeed-client/src/main.css +++ b/commafeed-client/src/main.css @@ -1,4 +0,0 @@ -html, body { - /* disable pull-to-refresh on mobile as it messes with vertical scrolling */ - overscroll-behavior: none; -} \ No newline at end of file diff --git a/commafeed-client/src/main.tsx b/commafeed-client/src/main.tsx index b7fa60c1..0f64f603 100644 --- a/commafeed-client/src/main.tsx +++ b/commafeed-client/src/main.tsx @@ -3,7 +3,6 @@ import "@mantine/core/styles.css" import "@mantine/notifications/styles.css" import "@mantine/spotlight/styles.css" import "react-contexify/ReactContexify.css" -import "main.css" import { App } from "App" import { store } from "app/store" import dayjs from "dayjs"