Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Force browser to recompute layout on page nav #16318

Merged
merged 4 commits into from
Aug 18, 2020
Merged

Force browser to recompute layout on page nav #16318

merged 4 commits into from
Aug 18, 2020

Conversation

Timer
Copy link
Member

@Timer Timer commented Aug 18, 2020

This fixes an edge case where every dozen or so transitions you'll see a flash depending on what's happening on the main thread at the time.

I'm not sure it's possible to test for this case, so we'll just have to do more field testing with this.

@Timer Timer requested a review from prateekbh August 18, 2020 17:40
timneutkens
timneutkens previously approved these changes Aug 18, 2020
View reviewed changes
timneutkens
timneutkens previously approved these changes Aug 18, 2020
View reviewed changes
ijjk
ijjk previously approved these changes Aug 18, 2020
View reviewed changes
@ijjk
Copy link
Member

ijjk commented Aug 18, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
buildDuration 10.2s 10.3s ⚠️ +105ms
nodeModulesSize 57.6 MB 57.6 MB ⚠️ +907 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.925 1.846 -0.08
/ avg req/sec 1298.43 1354.14 +55.71
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 0.996 1.038 ⚠️ +0.04
/error-in-render avg req/sec 2509.01 2407.36 ⚠️ -101.65
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..4e55.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-1ea360d..8d32.js gzip 7.16 kB 7.19 kB ⚠️ +27 B
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.1 kB 57.1 kB ⚠️ +27 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..dule.js gzip 6.11 kB 6.11 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ece3b39..dule.js gzip 6.18 kB 6.21 kB ⚠️ +26 B
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52 kB 52 kB ⚠️ +26 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-1464c..a26f.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-000f151..65d4.js gzip 1.29 kB 1.29 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.69 kB 7.69 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-e550f..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.35 kB 5.35 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
index.html gzip 947 B 948 B ⚠️ +1 B
link.html gzip 952 B 953 B ⚠️ +1 B
withRouter.html gzip 938 B 939 B ⚠️ +1 B
Overall change 2.84 kB 2.84 kB ⚠️ +3 B

Diffs

Diff for main-54a7068..a0.module.js 
@@ -737,8 +737,12 @@
               href,
               "stylesheet"
             );
-            link.setAttribute("data-n-staging", "");
-            link.setAttribute("media", "none");
+            link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
+            // cross-browser. Since this is so short lived we don't have to worry
+            // about style thrashing in a print view (where no routing is going to be
+            // happening anyway).
+
+            link.setAttribute("media", "print");
 
             if (referenceNode) {
               referenceNode.parentNode.insertBefore(
@@ -804,7 +808,10 @@
                 el.removeAttribute("data-n-staging");
                 el.removeAttribute("media");
                 el.setAttribute("data-n-p", "");
-              });
+              }); // Force browser to recompute layout, which prevents a flash of unstyled
+            // content:
+
+            window.getComputedStyle(document.body, "offsetHeight");
           }
 
           resolvePromise();
Diff for main-e7e4cfa..8d51fd9ff.js 
@@ -985,7 +985,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                             el.removeAttribute("data-n-staging");
                             el.removeAttribute("media");
                             el.setAttribute("data-n-p", "");
-                          });
+                          }); // Force browser to recompute layout, which prevents a flash of unstyled
+                        // content:
+
+                        window.getComputedStyle(document.body, "offsetHeight");
                       }
 
                       resolvePromise();
@@ -1026,8 +1029,12 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                           link = _ref11[0],
                           promise = _ref11[1];
 
-                        link.setAttribute("data-n-staging", "");
-                        link.setAttribute("media", "none");
+                        link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
+                        // cross-browser. Since this is so short lived we don't have to worry
+                        // about style thrashing in a print view (where no routing is going to be
+                        // happening anyway).
+
+                        link.setAttribute("media", "print");
 
                         if (referenceNode) {
                           referenceNode.parentNode.insertBefore(
Diff for index.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-cecf982e17b871bfad6e.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-cecf982e17b871bfad6e.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-cecf982e17b871bfad6e.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
buildDuration 11.5s 11.5s -29ms
nodeModulesSize 57.6 MB 57.6 MB ⚠️ +907 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..4e55.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-1ea360d..8d32.js gzip 7.16 kB N/A N/A
webpack-e067..f178.js gzip 751 B 751 B ✓
main-945fa21..4098.js gzip N/A 7.19 kB N/A
Overall change 57.1 kB 57.1 kB ⚠️ +27 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..dule.js gzip 6.11 kB 6.11 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ece3b39..dule.js gzip 6.18 kB N/A N/A
webpack-07c5..dule.js gzip 751 B 751 B ✓
main-18e59d2..dule.js gzip N/A 6.21 kB N/A
Overall change 52 kB 52 kB ⚠️ +26 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-1464c..a26f.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-000f151..65d4.js gzip 1.29 kB 1.29 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.69 kB 7.69 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-e550f..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.35 kB 5.35 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_error.js 1.03 MB 1.03 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.03 MB 1.03 MB ✓
link.js 1.07 MB 1.07 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.27 MB 5.27 MB ✓
Commit: 14c803d

@ijjk
Copy link
Member

ijjk commented Aug 18, 2020

Failing test suites

Commit: 14c803d

test/integration/build-output/test/index.test.js

  • Build Output > Basic Application Output > should not deviate from snapshot
Expand output

● Build Output › Basic Application Output › should not deviate from snapshot

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 0
Received:    0.019999999999999574

  119 |       expect(webpackSize.endsWith(' B')).toBe(true)
  120 | 
> 121 |       expect(parseFloat(mainSize) - 6.9).toBeLessThanOrEqual(0)
      |                                          ^
  122 |       expect(mainSize.endsWith('kB')).toBe(true)
  123 | 
  124 |       expect(parseFloat(frameworkSize) - 41).toBeLessThanOrEqual(0)

  at Object.<anonymous> (integration/build-output/test/index.test.js:121:42)

@ijjk
Copy link
Member

ijjk commented Aug 18, 2020

Failing test suites

Commit: f372050

test/integration/build-output/test/index.test.js

  • Build Output > Basic Application Output > should not deviate from snapshot
Expand output

● Build Output › Basic Application Output › should not deviate from snapshot

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 0
Received:    0.019999999999999574

  119 |       expect(webpackSize.endsWith(' B')).toBe(true)
  120 | 
> 121 |       expect(parseFloat(mainSize) - 6.9).toBeLessThanOrEqual(0)
      |                                          ^
  122 |       expect(mainSize.endsWith('kB')).toBe(true)
  123 | 
  124 |       expect(parseFloat(frameworkSize) - 41).toBeLessThanOrEqual(0)

  at Object.<anonymous> (integration/build-output/test/index.test.js:121:42)

developit
developit previously approved these changes Aug 18, 2020
View reviewed changes
@ijjk
Copy link
Member

ijjk commented Aug 18, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
buildDuration 10.9s 11.1s ⚠️ +219ms
nodeModulesSize 57.6 MB 57.6 MB ⚠️ +873 B
Page Load Tests Overall increase ✓
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.982 1.937 -0.04
/ avg req/sec 1261.09 1290.6 +29.51
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.081 1.072 -0.01
/error-in-render avg req/sec 2311.95 2331.1 +19.15
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..4e55.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-1ea360d..8d32.js gzip 7.16 kB 7.18 kB ⚠️ +21 B
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.1 kB 57.1 kB ⚠️ +21 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..dule.js gzip 6.11 kB 6.11 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ece3b39..dule.js gzip 6.18 kB 6.2 kB ⚠️ +19 B
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52 kB 52 kB ⚠️ +19 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-1464c..a26f.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-000f151..65d4.js gzip 1.29 kB 1.29 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.69 kB 7.69 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-e550f..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.35 kB 5.35 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
index.html gzip 947 B 948 B ⚠️ +1 B
link.html gzip 952 B 954 B ⚠️ +2 B
withRouter.html gzip 938 B 941 B ⚠️ +3 B
Overall change 2.84 kB 2.84 kB ⚠️ +6 B

Diffs

Diff for main-54a7068..a0.module.js 
@@ -737,8 +737,12 @@
               href,
               "stylesheet"
             );
-            link.setAttribute("data-n-staging", "");
-            link.setAttribute("media", "none");
+            link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
+            // cross-browser. Since this is so short lived we don't have to worry
+            // about style thrashing in a print view (where no routing is going to be
+            // happening anyway).
+
+            link.setAttribute("media", "print");
 
             if (referenceNode) {
               referenceNode.parentNode.insertBefore(
@@ -804,7 +808,10 @@
                 el.removeAttribute("data-n-staging");
                 el.removeAttribute("media");
                 el.setAttribute("data-n-p", "");
-              });
+              }); // Force browser to recompute layout, which prevents a flash of unstyled
+            // content:
+
+            getComputedStyle(document.body, "height");
           }
 
           resolvePromise();
Diff for main-e7e4cfa..8d51fd9ff.js 
@@ -985,7 +985,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                             el.removeAttribute("data-n-staging");
                             el.removeAttribute("media");
                             el.setAttribute("data-n-p", "");
-                          });
+                          }); // Force browser to recompute layout, which prevents a flash of unstyled
+                        // content:
+
+                        getComputedStyle(document.body, "height");
                       }
 
                       resolvePromise();
@@ -1026,8 +1029,12 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                           link = _ref11[0],
                           promise = _ref11[1];
 
-                        link.setAttribute("data-n-staging", "");
-                        link.setAttribute("media", "none");
+                        link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
+                        // cross-browser. Since this is so short lived we don't have to worry
+                        // about style thrashing in a print view (where no routing is going to be
+                        // happening anyway).
+
+                        link.setAttribute("media", "print");
 
                         if (referenceNode) {
                           referenceNode.parentNode.insertBefore(
Diff for index.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-9755f627c01359c1b2c3.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-9755f627c01359c1b2c3.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-9755f627c01359c1b2c3.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
buildDuration 12.4s 12.2s -278ms
nodeModulesSize 57.6 MB 57.6 MB ⚠️ +873 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..4e55.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-1ea360d..8d32.js gzip 7.16 kB N/A N/A
webpack-e067..f178.js gzip 751 B 751 B ✓
main-59b27f3..ef53.js gzip N/A 7.18 kB N/A
Overall change 57.1 kB 57.1 kB ⚠️ +21 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..dule.js gzip 6.11 kB 6.11 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ece3b39..dule.js gzip 6.18 kB N/A N/A
webpack-07c5..dule.js gzip 751 B 751 B ✓
main-8d09a3d..dule.js gzip N/A 6.2 kB N/A
Overall change 52 kB 52 kB ⚠️ +19 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-1464c..a26f.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-000f151..65d4.js gzip 1.29 kB 1.29 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.69 kB 7.69 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-e550f..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.35 kB 5.35 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_error.js 1.03 MB 1.03 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.03 MB 1.03 MB ✓
link.js 1.07 MB 1.07 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.27 MB 5.27 MB ✓
Commit: f06fe70

@ijjk
Copy link
Member

ijjk commented Aug 18, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
buildDuration 13.5s 13.7s ⚠️ +189ms
nodeModulesSize 57.6 MB 57.6 MB ⚠️ +907 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.557 2.5 -0.06
/ avg req/sec 977.61 1000.13 +22.52
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.515 1.572 ⚠️ +0.06
/error-in-render avg req/sec 1649.67 1590.32 ⚠️ -59.35
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..4e55.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-1ea360d..8d32.js gzip 7.16 kB 7.19 kB ⚠️ +27 B
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.1 kB 57.1 kB ⚠️ +27 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..dule.js gzip 6.11 kB 6.11 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ece3b39..dule.js gzip 6.18 kB 6.21 kB ⚠️ +26 B
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52 kB 52 kB ⚠️ +26 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-1464c..a26f.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-000f151..65d4.js gzip 1.29 kB 1.29 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.69 kB 7.69 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-e550f..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.35 kB 5.35 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
index.html gzip 947 B 948 B ⚠️ +1 B
link.html gzip 952 B 953 B ⚠️ +1 B
withRouter.html gzip 938 B 939 B ⚠️ +1 B
Overall change 2.84 kB 2.84 kB ⚠️ +3 B

Diffs

Diff for main-54a7068..a0.module.js 
@@ -737,8 +737,12 @@
               href,
               "stylesheet"
             );
-            link.setAttribute("data-n-staging", "");
-            link.setAttribute("media", "none");
+            link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
+            // cross-browser. Since this is so short lived we don't have to worry
+            // about style thrashing in a print view (where no routing is going to be
+            // happening anyway).
+
+            link.setAttribute("media", "print");
 
             if (referenceNode) {
               referenceNode.parentNode.insertBefore(
@@ -804,7 +808,10 @@
                 el.removeAttribute("data-n-staging");
                 el.removeAttribute("media");
                 el.setAttribute("data-n-p", "");
-              });
+              }); // Force browser to recompute layout, which prevents a flash of unstyled
+            // content:
+
+            window.getComputedStyle(document.body, "offsetHeight");
           }
 
           resolvePromise();
Diff for main-e7e4cfa..8d51fd9ff.js 
@@ -985,7 +985,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                             el.removeAttribute("data-n-staging");
                             el.removeAttribute("media");
                             el.setAttribute("data-n-p", "");
-                          });
+                          }); // Force browser to recompute layout, which prevents a flash of unstyled
+                        // content:
+
+                        window.getComputedStyle(document.body, "offsetHeight");
                       }
 
                       resolvePromise();
@@ -1026,8 +1029,12 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                           link = _ref11[0],
                           promise = _ref11[1];
 
-                        link.setAttribute("data-n-staging", "");
-                        link.setAttribute("media", "none");
+                        link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
+                        // cross-browser. Since this is so short lived we don't have to worry
+                        // about style thrashing in a print view (where no routing is going to be
+                        // happening anyway).
+
+                        link.setAttribute("media", "print");
 
                         if (referenceNode) {
                           referenceNode.parentNode.insertBefore(
Diff for index.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-cecf982e17b871bfad6e.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-cecf982e17b871bfad6e.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-cecf982e17b871bfad6e.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-7d018ac7533b50b2bea0.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
buildDuration 15s 15.4s ⚠️ +350ms
nodeModulesSize 57.6 MB 57.6 MB ⚠️ +907 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..4e55.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-1ea360d..8d32.js gzip 7.16 kB N/A N/A
webpack-e067..f178.js gzip 751 B 751 B ✓
main-945fa21..4098.js gzip N/A 7.19 kB N/A
Overall change 57.1 kB 57.1 kB ⚠️ +27 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..dule.js gzip 6.11 kB 6.11 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ece3b39..dule.js gzip 6.18 kB N/A N/A
webpack-07c5..dule.js gzip 751 B 751 B ✓
main-18e59d2..dule.js gzip N/A 6.21 kB N/A
Overall change 52 kB 52 kB ⚠️ +26 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-1464c..a26f.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-000f151..65d4.js gzip 1.29 kB 1.29 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.69 kB 7.69 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-e550f..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.35 kB 5.35 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_error.js 1.03 MB 1.03 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.03 MB 1.03 MB ✓
link.js 1.07 MB 1.07 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.27 MB 5.27 MB ✓
Commit: f372050

@ijjk
Copy link
Member

ijjk commented Aug 18, 2020

Failing test suites

Commit: f06fe70

test/integration/build-output/test/index.test.js

  • Build Output > Basic Application Output > should not deviate from snapshot
Expand output

● Build Output › Basic Application Output › should not deviate from snapshot

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 0
Received:    0.019999999999999574

  119 |       expect(webpackSize.endsWith(' B')).toBe(true)
  120 | 
> 121 |       expect(parseFloat(mainSize) - 6.9).toBeLessThanOrEqual(0)
      |                                          ^
  122 |       expect(mainSize.endsWith('kB')).toBe(true)
  123 | 
  124 |       expect(parseFloat(frameworkSize) - 41).toBeLessThanOrEqual(0)

  at Object.<anonymous> (integration/build-output/test/index.test.js:121:42)

@Timer Timer dismissed stale reviews from developit, ijjk, and timneutkens via 2773438 August 18, 2020 17:55
@Timer Timer requested a review from ijjk August 18, 2020 17:59
@ijjk
Copy link
Member

ijjk commented Aug 18, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
buildDuration 13.3s 14.1s ⚠️ +800ms
nodeModulesSize 57.6 MB 57.6 MB ⚠️ +873 B
Page Load Tests Overall increase ✓
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.561 2.536 -0.02
/ avg req/sec 976.02 985.82 +9.8
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.52 1.521 0
/error-in-render avg req/sec 1644.2 1643.72 ⚠️ -0.48
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..4e55.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-1ea360d..8d32.js gzip 7.16 kB 7.18 kB ⚠️ +21 B
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.1 kB 57.1 kB ⚠️ +21 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..dule.js gzip 6.11 kB 6.11 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ece3b39..dule.js gzip 6.18 kB 6.2 kB ⚠️ +19 B
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52 kB 52 kB ⚠️ +19 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-1464c..a26f.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-000f151..65d4.js gzip 1.29 kB 1.29 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.69 kB 7.69 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-e550f..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.35 kB 5.35 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
index.html gzip 947 B 948 B ⚠️ +1 B
link.html gzip 952 B 954 B ⚠️ +2 B
withRouter.html gzip 938 B 941 B ⚠️ +3 B
Overall change 2.84 kB 2.84 kB ⚠️ +6 B

Diffs

Diff for main-54a7068..a0.module.js 
@@ -737,8 +737,12 @@
               href,
               "stylesheet"
             );
-            link.setAttribute("data-n-staging", "");
-            link.setAttribute("media", "none");
+            link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
+            // cross-browser. Since this is so short lived we don't have to worry
+            // about style thrashing in a print view (where no routing is going to be
+            // happening anyway).
+
+            link.setAttribute("media", "print");
 
             if (referenceNode) {
               referenceNode.parentNode.insertBefore(
@@ -804,7 +808,10 @@
                 el.removeAttribute("data-n-staging");
                 el.removeAttribute("media");
                 el.setAttribute("data-n-p", "");
-              });
+              }); // Force browser to recompute layout, which prevents a flash of unstyled
+            // content:
+
+            getComputedStyle(document.body, "height");
           }
 
           resolvePromise();
Diff for main-e7e4cfa..8d51fd9ff.js 
@@ -985,7 +985,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                             el.removeAttribute("data-n-staging");
                             el.removeAttribute("media");
                             el.setAttribute("data-n-p", "");
-                          });
+                          }); // Force browser to recompute layout, which prevents a flash of unstyled
+                        // content:
+
+                        getComputedStyle(document.body, "height");
                       }
 
                       resolvePromise();
@@ -1026,8 +1029,12 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                           link = _ref11[0],
                           promise = _ref11[1];
 
-                        link.setAttribute("data-n-staging", "");
-                        link.setAttribute("media", "none");
+                        link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
+                        // cross-browser. Since this is so short lived we don't have to worry
+                        // about style thrashing in a print view (where no routing is going to be
+                        // happening anyway).
+
+                        link.setAttribute("media", "print");
 
                         if (referenceNode) {
                           referenceNode.parentNode.insertBefore(
Diff for index.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-9755f627c01359c1b2c3.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-9755f627c01359c1b2c3.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      href="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-e7e4cfa42d88d51fd9ff.js"
+      src="/_next/static/chunks/main-9755f627c01359c1b2c3.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-54a7068203cb3f136aa0.module.js"
+      src="/_next/static/chunks/main-a040764f50821ed5bf8a.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
buildDuration 15.6s 16.4s ⚠️ +763ms
nodeModulesSize 57.6 MB 57.6 MB ⚠️ +873 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..4e55.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-1ea360d..8d32.js gzip 7.16 kB N/A N/A
webpack-e067..f178.js gzip 751 B 751 B ✓
main-59b27f3..ef53.js gzip N/A 7.18 kB N/A
Overall change 57.1 kB 57.1 kB ⚠️ +21 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
677f882d2ed8..dule.js gzip 6.11 kB 6.11 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ece3b39..dule.js gzip 6.18 kB N/A N/A
webpack-07c5..dule.js gzip 751 B 751 B ✓
main-8d09a3d..dule.js gzip N/A 6.2 kB N/A
Overall change 52 kB 52 kB ⚠️ +19 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-1464c..a26f.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-000f151..65d4.js gzip 1.29 kB 1.29 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.69 kB 7.69 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-e550f..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-4cfda7a..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.35 kB 5.35 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js hotfix/recompute-layout Change
_error.js 1.03 MB 1.03 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.03 MB 1.03 MB ✓
link.js 1.07 MB 1.07 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.27 MB 5.27 MB ✓
Commit: 2773438

@kodiakhq kodiakhq bot merged commit 5f97550 into vercel:canary Aug 18, 2020
@Timer Timer deleted the hotfix/recompute-layout branch August 18, 2020 18:24
m-lautenbach pushed a commit to m-lautenbach/next.js that referenced this pull request Aug 20, 2020
@Timer
Force browser to recompute layout on page nav (vercel#16318)
90ebbcf 
This fixes an edge case where every dozen or so transitions you'll see a flash depending on what's happening on the main thread at the time.

I'm not sure it's possible to test for this case, so we'll just have to do more field testing with this.
@damusnet
Copy link
Contributor

damusnet commented Sep 9, 2020

Hi, on our "next": "9.5.3" app we just started noticing that a certain page that is taller than document height will not allow scrolling when loaded from Router.push navigation, but restores the scrollbars just fine after a refresh. Could this be related?

It looks very much like only our dev app on 9.5.3 has this bug, whereas our prod app on a previous version is not impacted.

@Timer
Copy link
Member Author

Timer commented Sep 9, 2020

It should not be related. It may be a side effect of us fixing cross-page styles leaking though. Can you check it's not a valid CSS bug?

@damusnet
Copy link
Contributor

damusnet commented Sep 9, 2020 •
edited

Not sure how to check if it's not a valid CSS bug or not. What do you suggest?

But I can confirm that this page is fine in both Chrome and Safari on our prod, and has the same no-scroll bug in both Chrome and Safari on our dev. I don't think we made any changes to our layout in between our prod and dev version, whereas we updated our dev to the latest Next.js on Tuesday. The CSS for our layout and that page are also pretty straightforward. This is an enterprise app with nothing fancy in terms of presentation. The fact that is scrolls fine after a refresh also seems to indicate the CSS should be okay.

@damusnet
Copy link
Contributor

damusnet commented Sep 9, 2020 •
edited

Some more details: it seems like it's not just one page. Instead, it's when we visit a certain page that has a complex layout, with a fixed full window height, no body scroll, and three column, that after we visit that page we can't scroll on any other page of the app. Again, every time, after refreshing the app, the scroll comes back.

It also seems to happen only on a production compiled code version, not in development mode.

@Timer
Copy link
Member Author

Timer commented Sep 9, 2020

Could you please open a new issue with a minimally reproducing demo?

@damusnet
Copy link
Contributor

damusnet commented Sep 9, 2020

Yes, I'll try my best this afternoon

@damusnet
Copy link
Contributor

damusnet commented Sep 9, 2020

Hey @Timer turns out it wasn't Next.js ; so sorry about all the noise, it was just one hell of a coincidence that I saw this "force browser to recompute layout on page nav" in the last release logs and jumped to conclusion. The answer was much more obvious: willmcpo/body-scroll-lock#196

Thanks for all your hard work on Next.js!

gu-stav
gu-stav reviewed Aug 10, 2021
View reviewed changes
packages/next/client/index.tsx

// Force browser to recompute layout, which prevents a flash of unstyled
// content:
getComputedStyle(document.body, 'height')
Copy link

@gu-stav gu-stav Aug 10, 2021 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Timer This line causes crashes on our app in Firefox, which is, according to the specs, the right behavoir:

TypeError: Window.getComputedStyle: 'height' is not a valid pseudo-element

It doesn't happen in dev, so unfortunately I can't provide a proper traceback ...

According to MDN only pseudo element selectors are allowed here. Do you remember what you tried to achieve here?

@gu-stav gu-stav mentioned this pull request Aug 11, 2021
Closed
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@gu-stav gu-stav gu-stav left review comments

@ijjk ijjk ijjk approved these changes

@developit developit developit left review comments

@timneutkens timneutkens timneutkens left review comments

@prateekbh prateekbh Awaiting requested review from prateekbh

@lfades lfades Awaiting requested review from lfades

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
6 participants
@Timer @ijjk @damusnet @developit @gu-stav @timneutkens