From 6ba1f6474b82334a2f4ea701d0cb915e2ea45767 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Sat, 3 Dec 2022 21:02:42 +0100 Subject: [PATCH 1/3] Force reflow when setting scrollBehavior --- packages/next/client/index.tsx | 1 + packages/next/shared/lib/router/router.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx index a5baeae1648c634..0fa4189f9e4986c 100644 --- a/packages/next/client/index.tsx +++ b/packages/next/client/index.tsx @@ -697,6 +697,7 @@ function doRender(input: RenderRouteInfo): Promise { const htmlElement = document.documentElement const existing = htmlElement.style.scrollBehavior htmlElement.style.scrollBehavior = 'auto' + htmlElement.getClientRects() window.scrollTo(input.scroll.x, input.scroll.y) htmlElement.style.scrollBehavior = existing } diff --git a/packages/next/shared/lib/router/router.ts b/packages/next/shared/lib/router/router.ts index 0815955205b7963..bde3f2436ea26a1 100644 --- a/packages/next/shared/lib/router/router.ts +++ b/packages/next/shared/lib/router/router.ts @@ -659,6 +659,7 @@ function handleSmoothScroll(fn: () => void) { const htmlElement = document.documentElement const existing = htmlElement.style.scrollBehavior htmlElement.style.scrollBehavior = 'auto' + htmlElement.getClientRects() fn() htmlElement.style.scrollBehavior = existing } From f0fff37fa292869717cc34fde007999e44486a04 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Tue, 6 Dec 2022 17:42:42 +0100 Subject: [PATCH 2/3] Added description of the hack that we did --- packages/next/client/index.tsx | 3 +++ packages/next/shared/lib/router/router.ts | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx index 0fa4189f9e4986c..7c5c09078d7d8ae 100644 --- a/packages/next/client/index.tsx +++ b/packages/next/client/index.tsx @@ -697,6 +697,9 @@ function doRender(input: RenderRouteInfo): Promise { const htmlElement = document.documentElement const existing = htmlElement.style.scrollBehavior htmlElement.style.scrollBehavior = 'auto' + // In Chrome-based browsers we need to force reflow before calling `scrollTo`. + // Otherwise it will not pickup the change in scrollBehavior + // More info here: https://github.com/vercel/next.js/issues/40719#issuecomment-1336248042 htmlElement.getClientRects() window.scrollTo(input.scroll.x, input.scroll.y) htmlElement.style.scrollBehavior = existing diff --git a/packages/next/shared/lib/router/router.ts b/packages/next/shared/lib/router/router.ts index bde3f2436ea26a1..6ffb6e0b619522c 100644 --- a/packages/next/shared/lib/router/router.ts +++ b/packages/next/shared/lib/router/router.ts @@ -659,6 +659,9 @@ function handleSmoothScroll(fn: () => void) { const htmlElement = document.documentElement const existing = htmlElement.style.scrollBehavior htmlElement.style.scrollBehavior = 'auto' + // In Chrome-based browsers we need to force reflow before calling `scrollTo`. + // Otherwise it will not pickup the change in scrollBehavior + // More info here: https://github.com/vercel/next.js/issues/40719#issuecomment-1336248042 htmlElement.getClientRects() fn() htmlElement.style.scrollBehavior = existing From 23701b962b991dce4c6537fae7eec6fb3d1ba9c5 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Tue, 6 Dec 2022 17:53:42 +0100 Subject: [PATCH 3/3] Add force reflow to a new scrollIntoView invocation --- packages/next/client/components/layout-router.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/next/client/components/layout-router.tsx b/packages/next/client/components/layout-router.tsx index 050ed4a0271af80..2a254414582dde4 100644 --- a/packages/next/client/components/layout-router.tsx +++ b/packages/next/client/components/layout-router.tsx @@ -127,6 +127,10 @@ class ScrollAndFocusHandler extends React.Component<{ const htmlElement = document.documentElement const existing = htmlElement.style.scrollBehavior htmlElement.style.scrollBehavior = 'auto' + // In Chrome-based browsers we need to force reflow before calling `scrollTo`. + // Otherwise it will not pickup the change in scrollBehavior + // More info here: https://github.com/vercel/next.js/issues/40719#issuecomment-1336248042 + htmlElement.getClientRects() domNode.scrollIntoView() htmlElement.style.scrollBehavior = existing }