IDを指定してリンク先にジャンプする
先日、リンク先にジャンプしたら画面が上下に動く事案がありまして。
リンク先がこんな記述になっていました。
<a name="hoge"></a>aタグのname属性使ったことないし取り敢えずここを直せばなおるんちゃう？って思っていました。
もちろん跳び先にIDを指定。
ところが！
全く治らない…
責任者の方からは普通の人は「あ、動いたな」くらいしか思わないから大丈夫だよ、といわれましたが気になるものは気になりまして、勤務時間外に検証スタート。
ちなみにですが、HTML5では、aタグのname属性は廃止されたということでした。
古いブラウザに対応する際に使用する可能性ありますが、使用しないのが無難ではないでしょうか。
Chromeだけが正常に飛ばないことが判明
主に使用されているであろうブラウザ、Chrome、Edge、Firefoxで動作検証。
すると、EdgeとFirefoxでは正常に表示されました。
さらに、ローカルでみてみるとChromeでも正常に表示されることが判明。
何が原因なのか…
まずは解消した方法
まずはCSSを部分ごとに切り分けてコメントアウトしながら検証。
かなり骨の折れる作業でしたが、paddingの上下がパーセントで表示されているものが原因であることが特定されました。
そこで、％表示からvwに設定を変更。
bg {
background: url(img/hogehoge.jpg) no-repeat;
background-size: cover;
width: 100%;
/*padding-top: 60%;*/
height: 60vw;
}上記のように書き換えたところ上下に動くのは解消しました。
原因を特定する
先ほどはCSSを調べましたが、次回トラブル時に備えて原因を究明しなければ本当に解決したとは言えません。
ということで、HTMLを調査すると…
なんと！
Facebookのプラグインが原因でした。
こいつが犯人か…
めっちゃ苦労したわ（笑）
推測するに、Chromeの場合は、
Facebookのプラグインを使用すると一時的に領域（幅）が広がり画面をはみ出す。
一旦最初に設定したパディングのパーセントで計算して表示する。
画面幅が正常にもどる。
パディングを再計算する。
といった流れになるのではないかと。
プラグインを直接いじって解消できればよかったのですが、限界でした。
回避する方法がわかる方、Please！
今回わかったことと対処法
- Facebookのプラグインを使うとクロームでの表示が一旦崩れる
- 回避方法は背景画像をパディング（パーセント指定）ではなく高さ（vw）で指定する
動作のデモ画面を用意したので興味のあるかたはどうぞ
