Vue3でCSSがちらついた凡ミスのお話

CSSをがちゃがちゃいじっている時、CSSの反映にタイムラグが出て、ちらつく現象が起きました。

※本当は幅90%にしたいのに、一旦100%で描画されてから90%になってしまった結果、ちらついていますというgif画像。

この現象、layoutsの中のscopedを忘れた場合にのみ、その範囲のCSSがタイムラグを起こすようだ。
コードとしてはこんな感じで、<style>を描く際にscopedが抜けてしまっています。

<template>
    <div class="allbody container blue grid">
        ...
    </div>
</template>

<style>
.allbody{
    width: 90%;
    max-width: 800px;
    ...

このコードの<style>を<style scoped>に変えてあげるとちゃんと動くようになりました。

そんな凡ミスであったことがわかったところで、この記事はおしまい。
（なんでタイムラグが起きるかは（たぶん）レイアウトが非同期で読み込まれることに関係がありそうだ（と思う）けどよくわからなかった。難しい）