使用 NextJS 生产版本加载页面时的 CSS Transition flash

Question

使用 NextJS 生产版本加载页面时的 CSS Transition flash

kap*_*oko 4 google-chrome css-transitions visual-glitch reactjs next.js

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

仅在 Chrome 中注意到，Firefox 和 Safari 没有这个问题。

Answer 1

kap*_*oko 7

在这个 stackoverflow 问题中找到了答案。显然这是由于 chrome 错误（https://crbug.com/332189和https://crbug.com/167083）。

修复方法是在正文末尾放置一个带有一个空格的脚本标记。在 NextJS 中，您可以通过添加pages/_document.js文件（更多信息）来完成此操作。

我的现在看起来像这样：

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 /sf/answers/3007872591/ */}
                    <script> </script>
                </body>
            </Html>
        )
    }
}

Run Code Online (Sandbox Code Playgroud)

编辑：此错误可能是固定的，因为2021年6月1日在Chrome Canary版v93.0.4529.0后7.5年！

另请尝试关闭 Chrome 开发工具，看看这是否是您的问题。对我来说是的。 (2认同)

归档时间：	6 年，6 月前
查看次数：	2206 次
最近记录：	4 年，6 月前