結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari

36,087views／投稿 2015-08-16／更新 2019-02-17

iOSでは CSSの:hover ゲームオーバーか！？

［この問題はiOS9から解消されてます。］

iOSのSafariで、:hoverに事件が起きています。

CSSでaタグに:hoverで何かの変化を施してある場合は、そのマウスオーバー変化が１クリック換算で止まってしまい、リンク先に飛ばない確率が高い感じです。要は２回クリックしないとハイパーリンク先にページ遷移しないです。iOS 8.4.1のiPhoneやiPadなどタッチデバイスでの話です。

  • １回タップ（a:hover描画処理のみで止まる）
  • ２回タップ（やっとリンク先に飛ぶ）

テキストリンク系は大丈夫ですが、「画像の透かし」や「お申込はこちら」的なボタン装飾も該当していそうです。

［追記］サンプルページを作りました。iOSデバイスで確認してみてください。Chromeもどうやら対象のようです。

:hover事件の該当な感じ例

  • a:hover imgで、opacity: 0.7とかの透かし
  • position: relativeでtop: 3px;とかでボタン凹む
  • marginの変化を付ける（凹むなど）
  • box-shadowでボタンに変化
  • <input type="image">ボタンに施した変化

特にimgのopacity: 0.7（70％透かし）は多くのサイトで採用されているでしょう。ECサイトの場合、商品画像が全部マウスオーバーで透ける（背景が白だと明るくなる）施しがされていたりします。また、購入ボタン的な一番クリックして欲しいようなaタグボタン装飾やinputボタンが該当します。これは大変。

:hoverでも大丈夫そうな要素

  • color
  • text-decoration
  • background-color
  • background-image

テキスト系や単純に色が変わる要素なら大丈夫そうで、１タップで遷移します。CSSスプライト的なbackground-imageだけなら大丈夫ですが、そこに前述のpositionとか絡めた変化があるとダメっぽいです。

対処法

［追記］to-R様が豊富な解決法を提案してくださっています。

  1. :hoverを:activeに変更する
  2. opacity: 1にする
  3. jQueryを使う

まずマウスオーバー要素が無くなれば解消されます。a:activeなら問題なく１クリック遷移します。一時しのぎになります。

img透かしのopacityは1（100％）にすれば、これは一発で遷移します（妙な感じがしますが検証したところそうです）。予備策というか100%ならそもそも不要なので、こちらは対処法とは言えませんが。

［追記］完全に忘れてましたがjQueryを使う手がありました。サンプルページを追加。

$(function(){$("a img").hover(function(){$(this).animate({opacity:0.7},200)},function(){$(this).animate({opacity:1},200)})});

かなり憶測

読んでいてわかると思いますが、情報源はありませんし、感覚です。もしかしたら、2015年8月14日のiOS 8.4.1時点ではなく、もっと前のiOS 8.4時点だったかもです。box-shadow系ボタンは以前からiPhoneでなんか遷移しない時がたまにあるな〜と思ってました。しかし、今回iOS 8.4.1にアップデートして他の:hover要素も明らかに１タップ目に:hoverアクションが消化されて止まる…といった状況なので投稿しています。

相当な悪影響

今回のCSS :hover事件はUXでかなり悪い影響がありそうで、

  • 何か変
  • 遅いイライラ
  • 怪しい
  • 拒否反応の始動
  • なんなの、このサイト腹立つ！

と、サイト評価的意味合いの深刻な問題と感じています。先ず自分で使っていて、タップする・・・遷移しない・・・確実に遷移しない・・・この体験は・・・あり得ない・・・やってられない！となります。自分の操作が正しく反応しないのはUX低下の根幹なのかもと感じるほどです。

Appleのシンプル

アップルがこんなにユーザービリティが良いのは逆に言えば、割りきってルールを簡素化してシンプルにするためにバッサバッサ切り捨てていくことにあります。個人的にはこの説明書いらずのユーザービリティ進化が好きでApple製品を好んで使っている理由でもあります。これだけタッチデバイスが増えた中、a:hoverの処理を中途半端にしておくのではなく、今後の新ルール付けにしようとしている舵取りとも見受けられます。

Apple WatchのForce Touch機能やMacBookの感圧タッチトラックパッドなどが波及しての何らかの損切り的な影響とも考えられます。iOS 9も秋に出ますがAppleなだけに仕様が戻るとは考えにくい。確かに考えてみれば、:hoverはPCサイト踏襲でアヤフヤでした。

CSSの:hoverパラダイムシフト

:hoverがスマホで反応する反応しなし、クリックした後に表示が戻らないとか、デザイン的な話題はありますが、そんな小さな話の問題ではないことを感じていただけると思います。

最近はレスポンシブデザインが普通なので、PCサイトとの混在でa:hover imgのopacity: 0.7とかの透かしはわかりやすくて便利だと天秤に掛けて考えたくなると思います。しかし、天秤に掛ける話ではないですね、明らかにa:hover事件の解消が優先でしょう。opacity:1にすれば取り敢えず解消されるので、特にECサイト商品はマウスオーバーで選択の視認性が高いので多数採用されてます。運営者さまは一旦処置しておくべきです。膨大なCSS記述にopacityは残るので、CSSソースがぐちゃぐちゃにならずに検証もできます。もちろん、そもそもPCとスマホ振り分けであったり、CSSメディアクエリでスマホ側とPC側で分かれていれば問題ありませんが。

a:hover img以外の申込ボタン系aは:hoverを:activeに一旦変更して実機で検証してみてください。こちらも:activeを普段記述してないCSSソースであれば全体置換しても後で判別できますし。

フォームの<input type="submit">には:hoverはほとんど使わないと思いますが、<input type="image">のマウスオーバーを私は使ったりしています。これも対象なので:activeに取り敢えず変更するのが良いでしょう。気合入れて作った豪華なLPの最終申込ボタンが該当だと、ちょっとズッコケます(笑)

レスポンシブサイトは、もはやPCサイト装飾の優先とはなりません。PCサイトでもクリックした瞬間は:activeになるので、この際全部の:hoverを:activeに一旦置換して、その後にiOSのSafariでも大丈夫な:hoverを探って変更していく逆順のアプローチを自分は取ってみます！

iPadでも検証

iPhoneでiOS 8.4.1にアップデートしたら明らかになったなと思ったので、アップデートする前のiPadで確かめて１タップで遷移するのを確認してから、その後iPadもiOS 8.4.1にしてみたら、やはり２段クリックになったので確信になりました。端末はiPhone 6とiPad Airです。

iOS 8.4.1配布開始が2015年8月14日です。
本日は2015年8月16日です。

結構な緊急事態だと思います。チェックしてみてください。

［追記］そして、iOS9ではこの問題は起こらない。

関連おすすめ記事