CSS 使用 NextJS 生产版本加载页面时出现过渡闪烁

Question

在我的 NextJS 应用程序的生产构建 (npm run build && npm run start) 中，我注意到元素在页面加载时触发 css 转换（链接闪烁蓝色，svg 闪烁颜色）。

仅在 Chrome 中发现，Firefox 和 Safari 没有此问题。

Answer 1

找到答案in this Whosebug question. Appearantly it is due to a chrome bug (https://crbug.com/332189 and https://crbug.com/167083).

修复是在正文末尾放置一个带有 space 的脚本标记。在 NextJS 中，您可以通过添加 pages/_document.js 文件 (more info).

来完成此操作

我的现在看起来像这样：

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
    render () {
        return (
            <Html lang="en">
                <Head>
                    <meta charSet="utf-8" />
                    <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                    {/* Empty script tag as chrome bug fix, see  */}
                    <script> </script>
                </body>
            </Html>
        )
    }
}

编辑：此错误可能 fixed 自 2021 年 6 月 1 日起在 Chrome Canary v93.0.4529.0 7.5 年后出现！

CSS 使用 NextJS 生产版本加载页面时出现过渡闪烁

CSS Transition flash on page load with NextJS production build

google-chrome

css-transitions

visual-glitch

reactjs

next.js