【Safari】css/JSの挙動がおかしい時の対処法【JavaScript】

お久しぶりです、webデザイナー兼フロントエンジニアの黒い巨匠と申します。
先日当社のエンジニアがSDGsと採用ページのリニューアルをしてくれました！
その際に起きた症状と解決方法をメモ的に残しておこうと思います。

症状・Safariのcss/JSの挙動がおかしい

Safariでブラウザバックするとkeyframe/animationで動かしている要素がズレる。
キャッシュ消してもダメ！
パラメータをつけてもダメ！
あ〜頭がどうにかなってしまいそうだ〜！

Safariのbfcache（Back/Forward cache）の挙動が原因かと思われます。

対処・SafariのJSの挙動がおかしい

window.onpageshow = function(event){
    if (event.persisted){
        window.location.reload();
    }
};

簡単に解説するとJSで、ブラウザバックしてもリロードさせbfcacheを無かったことにして解決しました。
せっかくのキャッシュを無かったことになんて邪道な気がします。もっとスマートでいい解決方法はないのか…？
（見つけたら更新するかもしれません。）

この件に関してはお悩みの方が多いようで、丁寧な解説記事が沢山ありましたので是非調べてみてください。
私が参考にさせていただいた記事は以下になります。

でざなり | SafariでブラウザバックするとJSなどが解除されていない問題【bfcache】
codelikeなブログ | [javascript][bfcache]safariでブラウザバックの対応

対処・Safariのcssの挙動がおかしい

window.addEventListener('load', function(){
	const css=document.createElement("link");
	css.setAttribute("rel","stylesheet");
	css.setAttribute("type","text/css");
	css.setAttribute("href","/パス/ファイル名.css");
	document.getElementsByTagName("head")[0].appendChild(css);
})

挙動的にアニメーションcssの自動計算がうまくいっていない様子だったので、keyframe/animation関係のcssを別ファイルにし、JSで、ウィンドウの描画後にそのファイルを読み込むようにしたところ改善しました。

ポンコツなもので気づかず少しつまづいた部分が「.phpファイル内であればscriptにphpが入れられる」みたいです。
以下のようにJSの中でWordPress関数が使えました。WordPress開発が捗りますね。

window.addEventListener('load', function(){
	const css=document.createElement("link");
	css.setAttribute("rel","stylesheet");
	css.setAttribute("type","text/css");
	css.setAttribute("href","<?php echo get_theme_file_uri("/パス/ファイル名.css") ?>");
  // こんな感じでWPのPHP関数が使える！
	document.getElementsByTagName("head")[0].appendChild(css);
})

余談ですが、window.onloadだと他のファイルも上書きをしてしまうので下記のwindow.onloadよりも上記のwindow.addEventListenerの方がより適切です。

window.onload=function(){
    // 省略
}

まとめ・なぜ挙動がおかしいのか考える

SDGsと採用ページのリニューアルには私はほぼ手をつけませんでした。作業中に気になるところをふらっとレビューして去る嫌なやつだったと思います。笑
ですが担当エンジニアはそれにも挫けず、レビューを改善し、今回の「挙動がおかしい」についても「原因」にほぼ辿り着くことができていました。
素晴らしい、今後の成長に期待ですね！

さて、BREEZEグループではそんな「成長したい」エンジニアの皆様を募集しています。
是非後輩エンジニアが作った採用ページをご覧の上ご応募ください！