FireFoxで他のページへのアンカーリンクが正しく動作しない時の対処

Wabサイトのコーディングにて、最終のデバイスチェックは重要です。スマホ・タブレット・PC〜さらにOSとブラウザ別に表示が同じになるか確認して、微調整する作業が一番手間暇苦労がかかるポイントです。今回の案件ではFireFoxに後ろから殴りつけられてしまいました。

一昔(?)前に比べれば、IEの旧バージョンがほぼ駆逐されて、ブラウザ間の差はかなりなくなってきています。まぁその分モバイルデバイスが増えて、デザイン的にもコーディング的にもより複雑になった気がしますが。

最近の案件ではモバイルファーストでデザイン・コーディングを進めていますので、PCの対応って少し後ろに回し気味なんです。スマホのデザインとコーディングを固めてから、PCのためのCSSを追加していく(もちろん事前に構造と設計はしていますが)ので、PCのOS/ブラウザ別チェックは工程の後半になるケースが多いです。

普段の作業時にはSafariとChromeをメインに使ってます。iPhone・iPadとの連携もとれるので何かと便利です。節目にWindowsでIEとEdgeのチェック入れてます。…そうです、FireFoxリストに入れてなかったんです。

納品直前のチェックで、別ページのアンカーへの移動がおかしいというコメントが来て、まさかと思って確認したらFireFoxだけ。

1ページに10個ほどのアイテムが配置してあって、トップページのリストから該当アイテムへページ移動と共にアンカー移動するというよくあるパターンですが、5番目以降のアンカーがすべて移動先ページの最下部にいってしまうという謎の現象が起きました。

HTMLはこんな感じ、
list.html
<a href="item.html#item7">アイテム7</a>
というリンクがあって、移動先のitem.htmlのアイテム7のdivに、
<div id="item7">コンテンツ</div>
ってなってる時に、list.htmlのリンクをクリックすると他のブラウザではページ移動してitem.htmlのアイテム7がページ上に表示されますが、FireFoxだけページ最下部へジャンプするという現象です。

調べてみると、かなりの皆さんが同じ現象に遭遇しているようで、
「nameがいる」「aタグじゃないとだめ」「銘々ルールに注意」など様々なTipsが出てきたので、順番に試したところ効果無し。さらに調べて、
「@importやばい」「jqueryが悪さしてる」とかもあったのですが、納品前の段階でそんなコアな部分を書き換えたりはリスキーすぎる。

「万策つきたー」気分でFireFoxでなぶっていたところ、ページ移動後にアンカー付きのURLをリロードすると、ちゃんと移動する事に気がつきました。同ページ内のアンカーはちゃんと反応するわけです。

ならば、移動後にもう一回URLをたたけば何とかなるかも、と思い立って方法を探しました。はじめにMETA REFRESH試しましたが、無限リロードになるだけ、そりゃそうか。読み込んだ直後に同じURLを引数に一回リロードするとなるとやっぱJavaScriptだよなということで、さらにさまよって海外サイトでこんなコードを発見。

<script language=JavaScript>
function now() {
window.location.reload(true);
}
</script>

上記のアンダーラインの処理をまんま行うスクリプトですね「すぐ現状のURLをリロード!」っていう乱暴な気もするスクリプトですが、</head>の直前に挿入して試したらうまいこといったので今回はなんとか乗り切った感じ。

スクロール関係のjquery puluginあたりを参考に煮詰めればもうちょっと勝手の良い方法もありそうですが、シンプルで効果的なのでこれもありかなと。
日本語のサイトになかったので、業務ログとして書き残しておきます。

コメントを残す

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