iPhone、iPadでリンクタグが2タップ必要な不具合について

iPhoneの不具合01

とあるお客様のWebサイト(WordPressにて)を構築中、動作確認している時にパソコンやAndoroidスマホでは確認できなかった不具合が見つかったので、ここに書き残しておく。

ちなみに私は根っからのGoole大好き人間でして、スマホもPixel6を所有しており、人と同じものが好きではない性格と日本人は猫も杓子もiPhone、自分の両親もiPhone使っているというのが嫌で。。
しかしながら、嫁がiPhone SE(第二世代)を所有しているのと、娘がイラスト書きたいとiPadを欲しがったので先月購入したiPad Air(2022年モデル)が、たまたま会社が休みの日だったので借りて検証しておりました。

整理すると、

  • PC:Windows11のノートパソコン
  • PC:Macbook Pro 2016
  • SP:Pixel6
  • SP:iPhone SE
  • TB:iPad Air

にて検証を実施しました。

たまたまiPhoneでリンク切れがないかチェックしていると、ボタンをタップしてもリンク先に飛ばない時があった。もう一度同じボタンをタップすると設定しているとおり、別ページへ飛ぶけど、ワンタップでは何故かリンクしない。
自分のPixel6で確認すると、リンクボタンを押すと何の問題もなくページ移動するし、パソコンでも問題がなかった。しかし、iPadで確認すると、iPhone同様リンクボタンを二度タップしないとページ移動しないことが分かった。

更にiPhoneで調べると、2タップしないとページ移動しない箇所と、1度のタップでページ移動する箇所があることが分かった。どうやらCSSでhoverの指定をしている場合に不具合が起こっているようで、何も指定していないリンクでは1タップでページ移動しているようだ。

色々先人の方々の記事を調べてみると、どうもクリックイベントの処理がiOSに不具合というか仕様が異なるようで、hoverの疑似クラスが設定されているリンクにはページ移動がしなくなってしまうようで、もう1タップ必要となってしまうようです。これはSafariのブラウザに発生している不具合ではなく、OSの不具合のようで、iPhoneのChromeでも2タップしないとページ移動しません。

これを回避する方法として、<header></header>、<main></main>、<footer></footer>タグに、空のオンクリックイベント( onclick=””)を追記することで、本来の1タップでページ移動するようになります。

他にも下記のJavaScriptのコードを追記することでこれらの不具合を回避することが可能です。

<script>document.addEventListener('touchstart',function(){});</script>
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次