Site icon Tips Note by TAM

【スマホサイト】開閉メニューのちらつきを解消したい

スマホサイトで開閉メニューを実装しiPhoneで確認したところ、タップしたリンクエリアが一瞬ちらつくことに気が付きました。 最初はjavascriptの問題かと思ったのですが、cssにある記述を追加する事で解決しました。

修正前のイメージ】
一瞬グレーのハイライトが見える。
修正前のイメージ
修正後のイメージ】

【cssに追加した記述】

html > * {
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}

上記はリンクをタップした時のハイライトを指定するプロパティで、a要素に指定する方法もあります。 iOSのハイライトがちらついてるように見えていたようです。 スマホサイトの特徴をきちんと理解しなければ、と反省した出来事でした。