最近はHTML5やCSS3を利用することで、非常に多彩な表現が可能になっているが、それぞれのブラウザで異なる表現を必要としたり、機能しなかったりするものも存在する。そういうこともあって、ウェブサイトを制作すると、さまざまなブラウザにて表示チェックを行う必要が出てくる。
私もウェブサイトを制作する際は、都度、極力多くのOSで、あまねくブラウザにて表示確認を行うようにしている。とくにCSS3は、IE対策のコーディングが面倒で…、という話題はよくあるが、今回はちょっと違う内容についてだ。Chromeの画像キャッシュが、うまく反映されない場合の対応策についてである。
私自身、メインブラウザはChromeであるのだが、以前「Google Chromeの起動が遅い！なんだか調子がおかしい！ ー Chromeのキャッシュを完全消去する方法」でも書いたように、少なからずもこのChromeというブラウザは、独特のクセのようなものが存在する。
以前、私がサイト制作中、CSSコード上で背景画像( background: url(‘*/xyz.jpg’) )を変更し、各種ブラウザで確認したところ、Chromeだけサイトに反映されないという事象があった。キャッシュの問題か、と手動クリアしてみたが、それでも変更前の画像のまま。一旦ブラウザを再起動しても変わらない。…なんで？ ということで、Chromeブラウザ右上の、 設定(三本線)を 、いろいろ見てて、気になるものを発見。ハードウェア アクセラレーションの設定だ。
「ハードウェア アクセラレーション」とは、ブラウザを閉じてもバックグラウンドでアプリケーションの処理を続行するようなもの。とくにMac上のChrome
は、ハードウェア アクセラレーションがオンの際、グラフィックボードに残っているデータをしつこく参照しているようで、ここを一旦オフにしてやれば、無事変更後の背景画像が表示された(因みに2014.8現在のMarverics)。
以下、その方法である。
1. Chromeブラウザ右上の、 設定(三本線) → 設定
２. 詳細設定を表示 をクリック
3. システム の ハードウェア アクセラレーションが使用可能な場合は使用する のチェックボックスを外す
4. 再起動 をクリック
5. 再度該当サイトにアクセスすると、画像が本来のものに変更されている。確認し終えたら、また3. のチェックを戻しておけばいい。
なおこれは、Flash(Adobe®)による表示不具合にも使える。
最近は動画をFlashで制作することは少なくなった。とはいえ実際に現存するウェブサイトは、まだまだレガシーなものがたくさん存在するのも事実だ。
なんだか画像がうまく表示されない時は、試してみればいかがだろう。
関連記事 : Google Chromeの起動が遅い！なんだか調子がおかしい！ ー Chromeのキャッシュを完全消去する方法
Comment