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ボタンはこの方法で表示させています。
「軽量のソーシャルボタンを作成する方法」