From f0fff37fa292869717cc34fde007999e44486a04 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Tue, 6 Dec 2022 17:42:42 +0100 Subject: [PATCH] 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