ちらつきの検証はF5を連打するとすぐわかります。
Contents
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>の下などに持っていきます。
空の
https://zenn.dev/catnose99/articles/3c106c81cbfdec<script>を、<body>の直後に配置すると問題が発生しなくなりました。
FireFoxとSafariでは問題ないけどChromeで発生する模様。暫定対応なので抜本的ではありません。
スタイルシートの上書きを見直す
たとえばデフォルトのスタイルシートで背景を白を指定して、JavaScriptで黒に上書きすると起動時、再読み込み時、画面遷移時にめちゃくちゃちらつきます。
body {
background-color: #fff;
/* visibility: hidden;
opacity: 0; */
}解決方法は初期の指定をなくす、もしくは透明にすればOKです。
コメント