Force reflow when setting scrollBehavior (#43673)

fixes #40719
vercel · Dec 7, 2022 · ba19ce3 · ba19ce3
1 parent bd9148d
commit ba19ce3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git 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
       }

diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
@@ -697,6 +697,10 @@ 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,10 @@ 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
 }