Menu
On my production build (npm run build && npm run start) of my NextJS app I noticed elements firing a css transition on page load (links flashing blue, svg flashing color).
Noticed in Chrome only, Firefox and Safari didn't have this problem.
248
Found the answer in this stackoverflow question. Appearantly it is due to a chrome bug (https://crbug.com/332189 and https://crbug.com/167083).
Fix is to put a script tag with one space at the end of the body. In NextJS you can do this by adding a pages/_document.js file (more info).
Mine looks like this now:
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>
)
}
}
Edit: This bug might be fixed since June 1st 2021 in Chrome Canary v93.0.4529.0 after 7.5 years!
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With