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.
This commit is contained in:
parent
ff33e07afe
commit
5f9755002d
2 changed files with 10 additions and 2 deletions
|
@ -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()
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue