iOSでリンクを2回タップしないと画面遷移しない問題

iPhoneでこのブログのリンクをタップすると1回目では画面遷移せず、2回タップするとようやく画面遷移するという現象が起きています。

いろいろ試行錯誤して解決したわけではないですが、原因の推測と対策を紹介します。

現象

2回タップしないと画面遷移しないリンクはこのブログのソーシャルボタン部分。

下記画像のようになっているリンクでTwitterをタップすると、画像が薄くなるだけで画面遷移しない。

↓

この後にもう一度Twitterをタップすると画面遷移が行われる。

Twitterのマークを1度タップし薄くなった状態で、1回のタップで画面遷移する正常なリンクをタップしても1度目では反応せず2回めのタップで画面遷移する。

このような状況。

原因の推測

上記現象が起こるリンクはCSSで「opacity」が設定されていた。

.sns_box a:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
}

この設定の中で「opacity: 0.6;」を削除すると通常通り1回のタップで画面遷移することを確認。

「opacity」の何がいけないのかいろいろ調べてみたが原因は分からず。。。

そこで以前使っていたiPhone5で確認してみると1回のタップで画面遷移して期待通りの動きをしていた。

もしやと思い、iOS8.1.2だったOSのバージョンを最新のIOS8.4.1にアップデートしたところ今回の現象を確認することができた。

iOS版のChromeとSafariでも今回の現象が確認できたので、iOS自体が原因の可能性が高いと思われる。

わからないことは人に聞こう

プログラミングをする上で、わからないことはネットなどを使い自分で調べる技術が必要ですよね。

時間がかかっても、ある程度のことは解決できます。

しかし、どうしても答えにたどり着けなかったり、探す時間が惜しいときもあります。

そこでオススメなのが無料登録でプログラミングに関する質問ができるテラテイルです。

質問の投稿にコードも投稿できるので、自分のコードを投稿して問題のある箇所を指摘してもらうことができます。

プログラマーには、自分で探す技術も必要ですが、人に聞く技術は更に重要です。

登録無料で質問できますので、テラテイルで質問する力を磨いてみましょう！

今すぐテラテイルで質問する

おわりに

「opacity」はマウスオーバー時の動作を簡単に設定できるので重宝しています。リンク画像はマウスオーバーで何かしらのアクションが合ったほうがクリックできることを伝えられるので読み手に対して親切ですよね。

パソコンとiOSでCSSを変更したほうが良さそうです。

因みにこのブログのSNSボタンはこの方法で表示させています。
「軽量のソーシャルボタンを作成する方法」