上司に教えてもらった方法なので、忘れないように、参考リンクもあわせてまとめ。
Android や iOS でページのリンクをタップした際に表示される、グレーのハイライトを無効にする方法です。
私の場合、react-tabs をアプリに導入したところ、iOS でページ遷移時に画面のほぼ全面が一瞬グレーがかったようになり、非常に見辛い状況でした。
それの対処法として、タブパネルにかかっていたリンクのハイライトを無効にしました。
教えてもらったリンクがこちら。
iOS や Android でリンクをタップした時に灰色の背景色が付くのをなくす CSS – Corredor
http://neos21.hatenablog.com/entry/2017/10/18/080000
実装方法ですが、まったく複雑なことはなく、ハイライト無効にしたい項目に下記のプロパティを追加するだけです。
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
上記を追加すると、原則全てのテキストリンクのハイライトが無効になります。
なお、iOS のみの機能ですが、ハイライトの色や透明度を指定することができるようです。
Android は無効化することしかできません。
a {
/* 透明度50%の緑 */
-webkit-tap-highlight-color: rgba(0, 255, 0, 0.5);
/* 紫色 */
-webkit-tap-highlight-color: #ff00ff;
}
指定するときは、上記のように指定します。
以上、リンクをタップしたときのハイライトを無効にする方法でした。
ただ、ハイライトがないと、リンクを押せたかどうかがわからないため、個人的にはあったほうがいいのでは…とも思います。
実際に使用してみて、導入するかを決めることをお勧めします。
私のように、変な場所にハイライトがかかっており、使っている時にストレスを感じる！使用感が悪い！という時には非常に有効だと思います。
