タイトルは某スパイ映画のタイトルから着想を得た。
今ホットワードのパクったわけじゃないよ、着想を得てオマージュしただけだから！
なにが言いたいかというとすごく単純でiOS 8.4.1にアップデートしてから
Safariでcssの:hoverが指定されていると意図しない現象が発生することがあるよってことです。
現象
a:hover imgしている画像ボタンをタップ→:hoverで指定しているopacity値に変化するもリンク先に飛ばず。- 1.で変化している画像ボタンを再度タップ→ようやくリンク先に飛ぶ
なおiOS 8.4.1にアップデートしないと発生しないことは確認した。
原因
そもそも:hoverはマウス系のイベントであるためiPhoneには当然マウスは存在しない。
存在しないが今まではマウスがなくてもよしなに:hoverを一応それっぽく動かしてくれていたわけだ。
(そもそも一応とはいえ動いていたの自体があまりよろしくなかったとも言える。)
ところが今回のアップデートiOS 8.4.1からは:hover自体を1クリックとして判定されるようになった模様。
これは実際にiPhoneとMacを繋いでコンソールやらタイムラインやらで通信状況などを確認したのでほぼ間違いがないだろうと思う。
少なくとも:hover実行段階では通信はリクエストされていないのだ。
上記の変更により:hoverの下に設置されているaタグのリクエストが飛ばず、
リクエストが飛ばないため画面を2度タップしないといけないというクソみたいな状況になったというわけである。
ただコレに関してはどうも2011、2012年くらいにすでに発生することがあったみたいでググるとそれっぽい記事に行き着いた。
iPhone/Androidなどwebkitのa:hover後、もとの状態に戻らないバグを修正したい
このブログの日付が2011年なので今まで動いていたのはどちらかというおめこぼし的な感じだったのだろうと思う。
それにしたってこういう変更をするならdeprecated的な勧告をしてほしいものだ
(勧告してたけど知らない可能性が高い気はするが…)
結論
:hoverを廃止する。
それが出来れば苦労しないって話ではあるし、現実いきなり:hoverを全面的に廃止するのは難しいと思う。
現実的な対応
a:hoverの代わりにa:acitveに置き換える- JavaScriptで同様の処理を実装する
:hover opacity部分をコメントアウトする- iPhoneとPCでcssを分ける
- 不貞寝する
という感じだろうか。
今回の不具合に関して言えば:hoverのopacity周りの実装が変わったみたいなので
ひとまず緊急対応として対策するならopacityをコメントアウトが手っ取り早くまた効果としても悪くないように思う。
(無論、他に影響がないか十分に精査するのは当たり前)
ボク自身は確認していないのだけどもopacityの値を1にすれば動作するという情報もある。
が、それはむしろ動作するほうがおかしいと思うので対策としてはあえてのせてない。
(次の更新でしれっとopacityが1でも押せなくなっていても全く不思議でないと考えている、というかバグじゃないの？)
最終的にはcss分割かJavaScriptで同じような処理を実装が妥当なところだと思われる。
個人的にcss分割は管理がめんどくさくなるのであまりやりたくないが元々分割してたとか、
他にもあってcssを分割するかどうか検討していたなどの条件があれば分割するのもひとつの手なのかもしれない。
参考サイト
日付から察するに同じようなタイミングで問題に遭遇したと思われる。
こちらが原因解明したあとでサイトを見つけて畜生もっと早くブログを書いていてくれれば！とちょっとだけ思ってしまったりなんかした。
