先日、サイトの動作確認をしていたらiPhone safariでリンクが完全に表示されない現象に出くわしました。
わたしはWindowsユーザーなのでmacのsafariで原因解析することができません。Windowsのsafariもありますが、かなり前にAppleは開発を中止しています。
safari特有のCSSのバグなのか?HTMLの構造が良くないのか?等いろいろ頭によぎりましたが、そのような事例は見当たらず、かといってiPhoneのsafariは検証ツールも使えないので簡単に解析もできません。
なかなか原因がわからず狼狽しました。
この記事では、iphone safariでリンクが表示時の原因についてメモしておきたいと思います。
Windowsでsafariの表示をデバッグできるか?
今回の現象はiOS safari特有の事例なので関係ないのですが、windowsユーザーがmac safariの動作確認をwindows上で行うにはどうするのが良いのでしょうか?
実は簡単ではありません。
windows版のsafariは既に開発が中止になっていますので、最新のsafariには対応していません。
オンラインでOSとブラウザの組み合わせをエミュレートできるサービスもありますが、有料です。
macのsafariはmacで確認するのが一番簡単で確実な方法になります。
まずは原因の切り分け調査から
HTMLを色々変更して、何が影響しているのか確認していきます。
調査をした結果、特定リンク先の場合だけリンクが表示されないことが分かりました。
サイトAへのリンクは大丈夫なのにサイトBへのリンクの場合はNGという状態。
HTMLの書き方やCSSの問題ではありません。
加えて、iPhoneのChromeだとOKでSafariだとNGという条件を加味すると、safariに追加されているプライバシー設定などの機能が影響しているのかなと思いました。
広告ブロッカーの280blockerがリンクを削除していた
safariに追加されているプライバシー設定などの機能が影響している可能性を考えた時に、一つ思い当たることがありました。
私は、iPhoneに広告ブロッカーとして280blockerを入れています。iphoneの広告ブロッカーはchromeには効かないので、safari特有の不具合現象を引き起こす原因となりえます。

このアプリを無効化したらリンクが表示されるようになりました。
広告ブロッカーはブラウザのプライベートモードとか関係なく動くので設定からOFFにするしかありません。
どうも、280blockerが参照しているブロックリストに含まれるリンクは自動的にHTMLから削除してしまうようです。
削除する際に、aタグだけ削除してくれるのならまだいいのですが、aタグで囲まれた要素を全てaタグごと削除するようなので、ごっそりリンク文字列なども消えてしまいます。
まとめ
iPhone safariは広告ブロッカーアプリの影響を受けてHTMLが改変される場合があることを覚えておいた方が良いと思います。
ユーザーごとに表示されたりされなかったりという不具合?のような現象も起こる可能性があります。