Force browser to recompute layout on page nav (#16318)

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.

packages/next/client/index.tsx

@@ -608,7 +608,11 @@ async function doRender({
     const required: Promise<void>[] = styleSheets.map((href) => {
       const [link, promise] = createLink(href, 'stylesheet')
       link.setAttribute('data-n-staging', '')
-      link.setAttribute('media', 'none')
+      // 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(link, referenceNode.nextSibling)
         referenceNode = link
@@ -674,6 +678,10 @@ async function doRender({
           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()

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

@@ -118,7 +118,7 @@ describe('Build Output', () => {
       expect(parseFloat(webpackSize) - 752).toBeLessThanOrEqual(0)
       expect(webpackSize.endsWith(' B')).toBe(true)
 
-      expect(parseFloat(mainSize) - 6.9).toBeLessThanOrEqual(0)
+      expect(parseFloat(mainSize) - 7).toBeLessThanOrEqual(0)
       expect(mainSize.endsWith('kB')).toBe(true)
 
       expect(parseFloat(frameworkSize) - 41).toBeLessThanOrEqual(0)