Added description of the hack that we did

vercel · Dec 6, 2022 · f0fff37 · f0fff37
1 parent 6ba1f64
commit f0fff37
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
@@ -697,6 +697,9 @@ function doRender(input: RenderRouteInfo): Promise<any> {
       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
@@ -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