Google ChromeでYahooツールバーなどを表示していると、CSSでfixed指定しているオブジェクトの縦位置がずれる。【技術情報】14.01.09

ホームページのコーディング構造によっては、Google Chromeでアドオン「Yahooツールバー」などを入れて表示している環境で、ブラウザ表示に不具合が生じるケースがある。
Google Chromeでアドオンを表示する場合はIE、Safari、Firefoxなどと違い、HTML内にパーツが表示される仕様。
「Yahooツールバー」の場合、Chromeは下記のようにツールバーの高さ37pxのIFRAMEが「position:fixed;」でHTML内のオブジェクトとして生成され、HTMLソース本体部分にpositionで37px分をtop指定でセットして表示を合わせようとしている。
また、bodyタグに「position: absolute;」がセットされる。

このことが原因してHTML内にposition指定を使用している場合、表示が37px分ずれたり、position指定でtopを制御しているjQueryを使用している場合は動作ががたついたり、コーディングによってはページ内容が全く表示されない場合もある。

解決策

bodyの背景画像をfixedにしている場合はbodyタグに

position: fixed;
top: 0 !important;
と指定すると影響はなくなるが、Yahooツールバーを無視して「top:0;」になりYahooツールバーの下にもぐりこんでしまう。あまりスマートな解決策ではないが背景はずれてもいいように高さを37px分、大きめにして余裕をもたせることで画像の欠けはなくなる。

最近流行りのパララックス効果でもスクロール時にfixedに指定したオブジェクトががたつくなどの影響がある場合はfixedに指定したオブジェクトの外枠に

position: fixed;
top: 0 !important;
を指定するとがたつきが回避できるがこちらも縦37px分ずれて表示されていることになる。
大手企業(ロリポップの管理画面のサイドメニューやカーディーラーのサイトなど)のサイトなどでも不具合が出たままなので現状、完全な解決策なないのかもしれません。

このエントリーをはてなブックマークに追加
「WEBaseとつながろう!」LINEでマーケティング情報を定期的に発信していきます。集客に興味がある方は、友達登録お願い致します。
Contents
お知らせ 一覧
使命は集客、戦略的WEB集客サポート「WEBコンサルティング」
お試しWEBコンサルティング
完全成果報酬型SEO対策「インジーニアスSEO」
戦略的ホームページ制作・リニューアル
「WEBaseとつながろう!」LINEでマーケティング情報を定期的に発信していきます。集客に興味がある方は、友達登録お願い致します。
ページTOPへ