先日僕が制作に関わったサイトについて連絡があり、「iPhone（Ver. 11, 12共に）のSafariでlighboxで表示させたiframe内のリンクをクリックするとiframe内のスクロールトップに戻る」というバグ報告が届きました。

最初これを聞いた時、誰かがページ内リンク設定しちゃったのかなーと思いソースを確認するも違い、何故かパソコンのブラウザからだと正しく機能していました。

、、、え？
iPhoneだけ？

一応解決は出来たので、方法をめも

まずは原因の特定

まず初めに疑ったのはjsです。

もしかしたら日頃使ってるjsの何かとバッティングしているのではないかと思い一度コメントアウトしたが結果は変わらず。。。

 

次にaタグをクリックしたらアラートを出すjsを書いて、それ以降の処理を停止させてみました。

そうすると、アラートが出てその後の処理がちゃんと止まったのでよしよしと思い、
次はaタグに設定しているhrefのリンク先にjsでiframeの親ウィンドウのURLを変更しました。

結果は失敗。
またスクロールトップしてしまいます。。。

何でやねん💢（そういえば最近のWPて絵文字使えるんだよね？）

 

解決策

何でこんな方法を試したか記憶にはありませんが、試しにaタグを全てspanタグに変更して遷移させたいURLをdata-urlといった属性でHTMLを書き換えてみました。

その後にjsでクリックされたら親ウィンドウをページ遷移するjsを書いたところ無事動作した！！

$('#linklist span').on('click', function() {
	var _this = $(this);
	parent.location.href = _this.data('url');
	return false;
});

おぉ！
解決できたー
spanタグ素晴らしいーーーー

ってなりましたね、深夜の2時ぐらいに。笑

 

後はリンクと分かりやすくするために「text-decoration: underline;」をhover時のみcssに設定して確認
。。。したらまた動作しない！？

ふと、まさかiosではhover時にunderlineがあると動作に影響がと思い、スマホの時のみunderlineがつかない様したら無事動作。。

 

これはiosのバグなのか、使ってるjsが悪さをしているのかが分かりませんでしたがとりあえず動作はしました。

ちなみに、aタグに戻してスマホのhover時のunderlineを消してもスクロールトップに戻ってしまったので、aタグは悪い子の様です。
（ココデ、ジカンヲ10プングライムダニシマシタ）

 

まとめ

この記事が誰かの役に立つとは思いにくいですが、僕と一緒に深夜作業してくれた人の思い出として残しておきます。笑