From 03303682c515298e61affc1becf6a06a7fcbfeea Mon Sep 17 00:00:00 2001 From: Dipak Halkude Date: Thu, 25 Sep 2025 12:56:22 +0530 Subject: [PATCH] Fix fragment link back button issue - Change fragment links from tags to NextLink components in MDX/Link.tsx - Set history.scrollRestoration = 'auto' for all browsers in _app.tsx - This prevents multiple new pages in backStack and maintains scroll position - Similar to how Wikipedia handles fragment links --- src/components/MDX/Link.tsx | 4 ++-- src/pages/_app.tsx | 14 ++------------ 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/components/MDX/Link.tsx b/src/components/MDX/Link.tsx index 8a47c401f2e..c7baac8ff54 100644 --- a/src/components/MDX/Link.tsx +++ b/src/components/MDX/Link.tsx @@ -44,9 +44,9 @@ function Link({ ) : href.startsWith('#') ? ( // eslint-disable-next-line jsx-a11y/anchor-has-content - + {modifiedChildren} - + ) : ( {modifiedChildren} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 80a0a0f8641..0eaab0befb4 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -33,18 +33,8 @@ export default function MyApp({Component, pageProps}: AppProps) { const router = useRouter(); useEffect(() => { - // Taken from StackOverflow. Trying to detect both Safari desktop and mobile. - const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); - if (isSafari) { - // This is kind of a lie. - // We still rely on the manual Next.js scrollRestoration logic. - // However, we *also* don't want Safari grey screen during the back swipe gesture. - // Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time. - history.scrollRestoration = 'auto'; - } else { - // For other browsers, let Next.js set scrollRestoration to 'manual'. - // It seems to work better for Chrome and Firefox which don't animate the back swipe. - } + // Set scroll restoration to 'auto' for all browsers to fix fragment link back button issue + history.scrollRestoration = 'auto'; }, []); useEffect(() => {