JavaScriptでCSS読込(ロード/画面遷移時)に画面がちらつく原因と解決

ちらつきの検証はF5を連打するとすぐわかります。

1 JavaScriptでCSS読込(ロード/画面遷移時)に画面がちらつく原因と解決

JavaScriptでCSS読込(ロード/画面遷移時)に画面がちらつく原因と解決

JavaScriptのロードを見直すdocument.addEventListener(‘DOMContentLoaded’, () => {})

タイミングが遅いから一瞬変な画面が挟まるのではないかですね。

/* 2つ書くと上書きされてしまうなどトラブルが多い */
window.onload = function(){
  console.log('おすすめできない');
}

/* 2番目 */
window.addEventListener('load', function() {
  console.log('2番目');
})

/* 1番目 */
document.addEventListener('DOMContentLoaded', () => {
  console.log('1番目');
})

JavaScriptやスタイルシートの読み込み場所を見直す

JSのコードだと</body>の直前が一般的ですが、<body>の下などに持っていきます。

空の<script>を、<body>の直後に配置すると問題が発生しなくなりました。
https://zenn.dev/catnose99/articles/3c106c81cbfdec

FireFoxとSafariでは問題ないけどChromeで発生する模様。暫定対応なので抜本的ではありません。

スタイルシートの上書きを見直す

たとえばデフォルトのスタイルシートで背景を白を指定して、JavaScriptで黒に上書きすると起動時、再読み込み時、画面遷移時にめちゃくちゃちらつきます。

body {
  background-color: #fff;

  /* visibility: hidden;
  opacity: 0; */
}

解決方法は初期の指定をなくす、もしくは透明にすればOKです。