[SOLVED] CSS Transition flash on page load with NextJS production build

CSS Transition flash on page load with NextJS production build

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.

Solution

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!