Question

在我的NextJS应用的生产版本（npm run build && npm run start）上，我发现元素在页面加载时触发CSS过渡（链接闪烁蓝色，svg闪烁颜色）。

仅在Chrome中安装，Firefox和Safari则没有此问题。

Answer 1

找到答案in this stackoverflow question。显然是由于Chrome错误（https://crbug.com/332189和https://crbug.com/167083）造成的。

修复是在正文末尾放置一个带有空格的脚本标签。在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 https://stackoverflow.com/a/42969608/943337 */}
                    <script> </script>
                </body>
            </Html>
        )
    }
}

使用NextJS生产版本在页面加载时实现CSS Transition Flash

1 个答案: