割と一般的なのかもしれないけどつい最近知ったネタなので共有します。
CSSには:activeという擬似セレクタがあって、要素をクリックしている間だけ特定のスタイルを有効にすることができます。スマートフォンのブラウザにも当然この:activeは存在しており、タップすることでスタイルを有効にすることができます。
ところが、AndroidのChromeのみ若干挙動が異なっており、:activeが使いドコロの難しい機能になっています。というのも、タップではなく長押ししないと有効にならないのです。
The :active pseduo works on Chrome for Android, but only after a long press (and cancel of the dialog), it doesn't work for any other element as far as I can tell. It looks like a bug, and I have just raised it with the team.
とのことで、この raise it は
173976 - :active pseudo class does not work on Chrome for Android - chromium - Monorail
を指しています。どうやら
<meta name="viewport" content="user-scalable=no, initial-scale=1">
をheadタグ内に記述するか、または
<body ontouchstart="">
とすると解決するらしいのですが、これはあまりにも汚いハックだと思います。(しかも前者はコードの有無で挙動が変わってしまう)
が、せざるを得ないという状況もあるため覚えておくと良さそうです。なお、JavaScriptでontouchstartとontouchend、ontouchcancelを拾うとかをするのも良さそうです。
とはいえ、押下時にスタイル変更範囲がならユーザが気づかないということもあるため、そこまでコストをかけてやるべきことかという疑問は残ります。やる気と時間があるならやってもよさそうというスタンスでいるべきと思いました。
