文字サイズをクッキーで保存した際、Chromeで不具合がある

発生している問題・エラーメッセージ

js.cookie.jsを利用して文字サイズ変更ボタンを設置しました。
クッキーも保存され、動作はするのですが、Chromeでのみ文字サイズを「大」にすると
リロードとページ遷移の際に文字サイズが一瞬「小」になってから徐々に「大」になります。
（とは言うもののサっと動く感じで遅い速度では無いです）

IEやFirefoxではこのような現象はありません。
こちら原因や解決法をご存じでしたら助けていただけないでしょうか。

HTMLファイルは実際はもっと重いです。
下のソースですと軽くて事象が確認できないかもしれません。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6	<script
7  src="https://code.jquery.com/jquery-2.2.4.min.js"
8  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
9  crossorigin="anonymous"></script>
10<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
11<script src="script.js"></script>
12</head>
13<body>
14<ul>
15	<li><a href="#" id="small">小</a></li>
16	<li><a href="#" id="big">大</a></li>
17</ul>
18
19<p>テキストテキストテキスト</p>
20<p>テキストテキストテキスト</p>
21<p>テキストテキストテキスト</p>
22
23
24</body>
25</html>

javascript
1jQuery(function($){
2
3
4var small = '100%';
5var big = '150%';
6
7//Cookieがセットされていない場合はsmallサイズにする
8if (!Cookies.get('cookieFontSize')) {
9	$('html').css('font-size', small);
10} else if (Cookies.get('cookieFontSize') == 'font_medium') {
11	$('html').css('font-size', small);
12} else if (Cookies.get('cookieFontSize') == 'font_large'){
13	$('html').css('font-size', big);
14}
15
16// 小
17$('#small').click(function(){
18	$('html').css('font-size', small);
19	Cookies.set('cookieFontSize', 'font_medium', { expires: 7 });
20	return false;
21});
22
23// 大
24$('#big').click(function(){
25	$('html').css('font-size', big);
26	Cookies.set('cookieFontSize', 'font_large', { expires: 7 });
27	return false;
28});
29
30
31});

行動規範の内容に同意します

回答2件

下のソースですと軽くて事象が確認できないかもしれません。

そもそもJavaScriptでやってることは「html読み込み後、css指定」ですよね。
でしたら提示のようになるのは当然ですし、
ご自身が仰っているようにコード量が多いと読み込み時間とか諸々で更に時間がかかるのは当然かと思います。
確実に反映させたければ、htmlが読み込まれる前、cssファイルの読み込みと同じくらいのタイミングにする必要があります
jQuery(function($){
↑がある以上はhtmlの読み込みを待ってから動きますし、かといって除いてしまっては
$('html') がない状態で動かすことになるのでたぶん効きません。
phpなどサーバー側の言語でCookieを読み込んでstyleタグを設置するしかないのではないでしょうか。

投稿2018/10/30 17:06

編集2018/10/30 17:17

m.ts10806

総合スコア80850

kei344

2018/10/30 17:14

jQueryさえ呼んでいれば、head要素内のscriptから $('html') はアクセス可能ですよ。

m.ts10806

2018/10/30 17:15

あ、なるほど。ちょっと自信なかったので「たぶん」と書いてました。取り消し線入れておきます

kei344

2018/10/30 17:20

私も自信が無くて確かめました (笑) 。

umauman

2018/10/31 06:18

ご回答ありがとうございます。スタイルシートは読み込んでいないのですが、jQueryのフォントサイズの操作の部分を差しておられるのでしょうか。 HTML＋JavaScriptでは難しいという事ですね。ただ謎なのがChromeのみで起きるということなのですが、他のブラウザと仕様が異なるということでしょうか..

m.ts10806

2018/10/31 06:31

スタイルの話で合ってますよ。cssはスタイルそのものも差します。起きてないようで実は起きてるというのが実際かと。そのあたりのレンダリングについては詳しくないですが、現状の作りから確実にDOM全読み込みまで待ってから書き換えを行っているので、例えば表示を優先させるブラウザではほぼ確実に見えた形で起きます。デベロッパーツールでブレークポイント貼ってみるとわかるかもしれません。たぶんどのブラウザでも書き換え前の状態で見れると思います。

umauman

2018/10/31 06:55

おっしゃる通り、さらにわざとHTMLを重くしてみたところ他のブラウザでも同様の問題が起きました。 Chromeが原因と思い込んでいました... 色々と勉強になりました。本当にありがとうございました。

m.ts10806

2018/10/31 06:58

見えてる情報ってそれが全てではないのでコード上でデバッグしていく癖をつけた方が問題の切り分けがうまくいきます。

umauman

2018/10/31 07:21

恥ずかしながらConsoleでエラー情報を見ることくらいしかしてこなかったので、ブレークポイント使ってみるようにします。（デバッグに必須のツールみたいですね..）ありがとうございました。

行動規範の内容に同意します

ベストアンサー

jQuery(function($){
↑がある以上はhtmlの読み込みを待ってから動きます

mts10806さんの上記指摘を踏まえて、下記のようにしてみてはいかがでしょう。

js
1// jQuery(function($){ //ここじゃなくて
2
3var small = '100%';
4var big = '150%';
5
6//Cookieがセットされていない場合はsmallサイズにする
7if (!Cookies.get('cookieFontSize')) {
8    $('html').css('font-size', small);
9} else if (Cookies.get('cookieFontSize') == 'font_medium') {
10    $('html').css('font-size', small);
11} else if (Cookies.get('cookieFontSize') == 'font_large'){
12    $('html').css('font-size', big);
13}
14
15jQuery(function($){ // ここに移動
16// 小
17$('#small').click(function(){
18    $('html').css('font-size', small);
19    Cookies.set('cookieFontSize', 'font_medium', { expires: 7 });
20    return false;
21});
22
23// 大
24$('#big').click(function(){
25    $('html').css('font-size', big);
26    Cookies.set('cookieFontSize', 'font_large', { expires: 7 });
27    return false;
28});
29
30});