iPad Safari:リンクがヒットしたときに高速点滅効果を無効にする方法


87

それを無効にする方法はありますか?
私はブラウザでのみ意味します...リンク、ボタン、またはクリック機能を持つdivをクリックすると、すばやくクリックした場所で灰色のボックスが点滅します。これを防ぐにはどうすればよいですか?


4
なぜあなたはしたいですか?これは、ユーザーが実際に何かをアクティブにしたことをユーザーに知らせるためです...非常に役立ちます。
Fosco 2010

3
基本的に、大きな画像の上にdivがあります。ダブルクリックするとズームインします(他の理由でズームオプションを無効にしました)。一度クリックすると、ツールバーが表示または非表示になります。このdivは透明なので、クリックするたびにちらつくことはしたくありません。ただし、他のほとんどのボタンにはそのままにしています。

回答:


216

その要素の-webkit-tap-highlight-colorプロパティに透明色を設定できます。

a {
    -webkit-tap-highlight-color: transparent;
}

73
例:-webkit-tap-highlight-color: rgba(0,0,0,0);
CrazyTim

とてもクールです。私のモバイルアプリを含むコンテナーdivに追加しましたが、次のようにbody要素にも追加できると想定しています。 }
B-Money

13
ちなみに、私がPhonegapで作成しているアプリは、要素をタップすると短いちらつきが発生し続けました。-webkit-tap-highlight-color:transparentすべてに設定すること(つまり*)は魅力のように機能しました。
チャーリー

2
チャーリー-表示されている問題は、Webkitが非アクティブになると、ハイライトカラーを一時的にアイテムに適用するように見えるためです。このようなグローバルルールを設定するのではなく-webkit-tap-highlight-color: rgba(0,0,0,0);、ターゲットリンクの非アクティブ状態に追加することで問題が解決します。
マイケルジョンストン

1
追加したいだけでwebkit-tap-highlight-color: noneうまくいきませ。実際には、を使用して透明度を設定する必要がありrgba(0,0,0,0)ます。
マシューパフコフ2014年

8

PhonegapでモバイルSafariを使用すると、これだけが機能しました。

* {  -webkit-backface-visibility:  hidden;
     -webkit-tap-highlight-color:  transparent;
  }

出典:iPhone WebKit CSSアニメーションがちらつきを引き起こす

また、メインパネルでレンダリングを有効にします。

div.myPanelOrWhatever 
  {
      -webkit-transform: translate3d(0, 0, 0)
  }

出典:webkit-transformのwebkit-transitionでちらつきを防止


心配する必要があるMozillaバージョンはありますか?
スターリングボーン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.