【WordPress】 Chromeでリロードをすると文字サイズが変化する問題

前回に続いてChrome絡みで発生している問題です。

テストサイトで自動整形について確認をしているときに気付いたのですが、Chromeでは時々Style.cssが正しく適用されていない場合があるようです。

今回はこれについて調べました。

スポンサーリンク

どんな問題?

WordPressで作成したサイトをChromeで表示させるとフォントサイズが正しく表示されないことがあるという問題です。

これはプレビューだけではなく公開された記事でも再現します。

この問題の発生環境は、
・windows7(64bit)
・WordPress 3.7.1–ja
・TwentyTwelveの子テーマを使用(中身は空)
・Chrime バージョン 31.0.1650.63 m
です。

具体的にはどうなるの?

試しにこのような記事を作成しました。

automatic_formatting_23

これで上下共に同じフォントサイズになるはずです。

これをChromeで表示させるとこうなります。

automatic_formatting_24

確かに同じサイズになりました。
なんの問題もありません。

ところが続けてリロードや再表示を行うとこうならない場合があるのです。

こんな感じに

automatic_formatting_25

見て分かる通りスタイルを直接指定していない上側のフォントが大きくなっています。

続けてリロードしてみると、

 → 小 →  → 小 → 小 → 小 →  →  → 小

というように不規則に変化します。
ただし、大きくなりっぱなしや正常に表示され続ける場合もあります。
この不具合の出現にはかなりのムラがあるということです。

その他確認したこと、考えたこと

・Chromeといえば強力なキャッシュで有名ですのでこれを疑いましたが、リロードするたびにランダムに切り替わることからキャッシュが原因ではないようです。
また、ブラウザでフォントサイズを強制することも出来ますがその指定はしておらず、これもランダムに切り替わることを説明できません。

・TwentyTwelveはレシポンシブデザインですが、文字が大きくなった状態でブラウザの幅を縮小→拡大をすると正しい文字サイズに戻ります。
style.cssの情報は伝わっているようですが、ブラウザが正しい判断をしていないようです。

・なお大きくなったフォントサイズは1.15remのようです。

・別のPC(Vista+Chrome)でも再現します。

・ただしFirefoxでは発生しません。

・この確認はTwentyTwelveの子テーマを適用してから行っていますが、子テーマ内のStyle.cssは子テーマの宣言以外に何も追加していない空です。
親テーマで指定したフォントサイズ(1rem=14px、100%)にならなければいけません。

・試しに親テーマのTwentyTwelveに切り替えるとこの症状はでなくなります。
このことからこの不具合には子テーマが関与しているようです。

・すなわちTwentyTwelveで子テーマを作成し、子テーマでフォントサイズを指定せずに親テーマのフォントサイズを使ったときに発生すると言えます。

・子テーマでフォントサイズを指定するとこの不具合は発生しない。
確かに先日作ったサイトでも不意にフォントサイズが大きくなったため、子テーマで指定しなおした覚えがあります。

考えられる原因は?

ブラウザの幅を変更すると不具合が治ることからstyle.cssは正しく読み込まれています。

おそらく読み込んだstyle.cssをChromeが正しく適用出来ていないことが原因のようです。

発生する条件

これまでの情報をまとめると以下のようになります。

・Chromeでサイトを閲覧をする。
・TwentyTwelveの子テーマを使用する。
・子テーマのstyle.cssでフォントサイズを指定しておらず、親テーマのフォントサイズを参照している。
・再現性はあるものの、不具合の出現にはかなりのムラがある。その切り替わる条件は不明。

今後のの対応は?

Chromeでサイトを作成する場合は出来栄えをチェックするためにリロードを連打することになります。これは現実的ではありません。

・まずサイトの作成作業はFirefoxに切り替えます。

・そして、サイトデザインをする際は「必要はなくても子テーマでフォントサイズを再指定する」を徹底しなければいけません。

そして一番の問題は公開してもChromeではサイトが正しく表示されないことがあるということです。

・これはChromeで正しく表示されるかを仕上げの段階でチェックすることて対応します。(チェック項目に追加)

また手間が増えてしまいますがやむを得ませんね。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメント

  1. はせがわ より:

    私も同じような環境と同じ症状です。解決策を検索していましたら、こちらの投稿を見つけました。その後、この問題に対する解決方法などはあるのでしょうか?小テーマのCSSをどういじったらいいのでしょうか?

  2. 雨男 より:

    回答が遅くなり申し訳ありません。

    1.適用されているはずの親テーマのstyle.cssをブラウザの右クリック→「要素を検証」で調べる。
    2.次に親テーマの該当するCSSコードを子テーマにコピーする。
    で直るはずですが・・・。
    今、私の環境で確認をしたらこの問題は再現できませんでした。

    WordPressのバージョンは 3.9.2–ja
    Chromeのバージョンは36.0.1985.143 m
    と現時点では最新です。
    記事内のvistaマシンでも再現しません。

    WordPressかChromeのどちらかのバグで修正済みなのかもしれません。
    一度最新のバージョンにアップデートしてみてください。

    • はせがわ より:

      ご返信ありがとうございます。
      ご返信いただいていたことに気づかずに確認が遅くなりました。
      すいません。

      1.適用されているはずの親テーマのstyle.cssをブラウザの右クリック→「要素を検証」で調べる。
      2.次に親テーマの該当するCSSコードを子テーマにコピーする。

      このやり方が初心者のためわかりません。
      もうすこしわかりやすくお願いできますでしょうか。
      もしくはわかりやすい解説リンクURLなどあれば教えていただけると助かります。

      WordPressのバージョンは 3.9.2–ja
      Chromeのバージョンは36.0.1985.143 m
      と現時点では最新です。
      記事内のvistaマシンでも再現しません。

      私もwordpress chromeともにバージョンは同じく最新です。
      Vistaですが、やはり文字フォントが今でもランダムに変わっています。

      またなにかわかりましたら、
      ご教授いただけますとありがたいです。

      お忙しいとは思いますが、どうぞよろしくお願いします。

      • 雨男 より:

        すいません。
        よくよく調べてみたら不具合が再発しました。

        対策案を記事としてまとめましたのでこちらをご覧になってください。

        【WordPress】 Chromeでリロードをすると文字サイズが変化する問題(その2)
        http://affinote.net/wordpress/1800/

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA