質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.63%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,249

umauman

score 57

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<ul>
    <li><a href="#" id="small"></a></li>
    <li><a href="#" id="big"></a></li>
</ul>

<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>


</body>
</html>
jQuery(function($){


var small = '100%';
var big = '150%';

//Cookieがセットされていない場合はsmallサイズにする
if (!Cookies.get('cookieFontSize')) {
    $('html').css('font-size', small);
} else if (Cookies.get('cookieFontSize') == 'font_medium') {
    $('html').css('font-size', small);
} else if (Cookies.get('cookieFontSize') == 'font_large'){
    $('html').css('font-size', big);
}

// 小
$('#small').click(function(){
    $('html').css('font-size', small);
    Cookies.set('cookieFontSize', 'font_medium', { expires: 7 });
    return false;
});

// 大
$('#big').click(function(){
    $('html').css('font-size', big);
    Cookies.set('cookieFontSize', 'font_large', { expires: 7 });
    return false;
});


});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 15:55

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

    キャンセル

  • 2018/10/31 15:58

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

    キャンセル

  • 2018/10/31 16:21

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

    キャンセル

checkベストアンサー

+1

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

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

// jQuery(function($){ //ここじゃなくて

var small = '100%';
var big = '150%';

//Cookieがセットされていない場合はsmallサイズにする
if (!Cookies.get('cookieFontSize')) {
    $('html').css('font-size', small);
} else if (Cookies.get('cookieFontSize') == 'font_medium') {
    $('html').css('font-size', small);
} else if (Cookies.get('cookieFontSize') == 'font_large'){
    $('html').css('font-size', big);
}

jQuery(function($){ // ここに移動
// 小
$('#small').click(function(){
    $('html').css('font-size', small);
    Cookies.set('cookieFontSize', 'font_medium', { expires: 7 });
    return false;
});

// 大
$('#big').click(function(){
    $('html').css('font-size', big);
    Cookies.set('cookieFontSize', 'font_large', { expires: 7 });
    return false;
});

});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 15:52

    こちらの修正で気持ち悪い動きが解消されました。
    本当にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る