とあるお客様の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>
コメント