iPad Safari: Cara menonaktifkan efek berkedip cepat saat tautan dipukul

Question 1

Apakah ada cara untuk menonaktifkannya?
Maksud saya hanya di browser ... Saat Anda mengklik link atau tombol atau div yang memiliki fungsi klik di atasnya, kotak abu-abu akan berkedip di tempat Anda mengklik dengan cepat. Bagaimana cara mencegahnya?

Question 2

Anda bisa menyetel warna transparan ke -webkit-tap-highlight-colorproperti elemen itu.

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

Question 3

Menggunakan Safari seluler di Phonegap, hanya ini yang berfungsi:

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

Sumber: Animasi CSS WebKit iPhone menyebabkan flicker

Selain itu, di panel utama, aktifkan rendering:

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

Sumber: Mencegah pergantian tampilan halaman pada transisi webkit dari transformasi webkit

Answer 1

89

Apakah ada cara untuk menonaktifkannya?
Maksud saya hanya di browser ... Saat Anda mengklik link atau tombol atau div yang memiliki fungsi klik di atasnya, kotak abu-abu akan berkedip di tempat Anda mengklik dengan cepat. Bagaimana cara mencegahnya?

ipad mobile-safari kucing
sumber

4

Mengapa Anda ingin? Agar pengguna tahu bahwa mereka benar-benar mengaktifkan sesuatu ... itu sangat membantu.

Fosco

3

Pada dasarnya, saya memiliki div di atas gambar besar. Ketika mereka mengklik dua kali, itu memperbesar. (Saya telah menonaktifkan opsi zoom karena alasan lain) dan ketika Anda mengkliknya sekali, itu memungkinkan toolbar untuk muncul atau menghilang. Karena div ini transparan, saya tidak ingin itu berkedip setiap kali mereka mengkliknya. Namun, saya menyimpannya di sebagian besar tombol saya yang lain.

kucing

Answer 2

4

Mengapa Anda ingin? Agar pengguna tahu bahwa mereka benar-benar mengaktifkan sesuatu ... itu sangat membantu.

Fosco

Answer 3

3

Pada dasarnya, saya memiliki div di atas gambar besar. Ketika mereka mengklik dua kali, itu memperbesar. (Saya telah menonaktifkan opsi zoom karena alasan lain) dan ketika Anda mengkliknya sekali, itu memungkinkan toolbar untuk muncul atau menghilang. Karena div ini transparan, saya tidak ingin itu berkedip setiap kali mereka mengkliknya. Namun, saya menyimpannya di sebagian besar tombol saya yang lain.

kucing

Answer 4

217

Anda bisa menyetel warna transparan ke -webkit-tap-highlight-colorproperti elemen itu.

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

kennytm
sumber

73

yaitu:-webkit-tap-highlight-color: rgba(0,0,0,0);

CrazyTim

Sangat keren, terima kasih. Saya menambahkannya ke div penampung yang mencakup aplikasi seluler saya, tetapi asumsikan bahwa Anda juga dapat menambahkannya ke elemen body seperti ini: body {-webkit-tap-highlight-color: rgba (0,0,0,0); }

B-Money

13

Sebagai catatan, aplikasi yang saya buat di Phonegap terus berkedip singkat saat mengetuk elemen, dan itu terlihat mengganggu saya. Pengaturan -webkit-tap-highlight-color:transparentuntuk segala sesuatu (yaitu *) bekerja seperti pesona.

Charlie

2

Charlie - Masalah yang Anda lihat adalah karena Webkit tampaknya menerapkan warna sorotan ke item secara singkat setelah tidak aktif. Daripada menetapkan aturan global seperti itu, menambahkan -webkit-tap-highlight-color: rgba(0,0,0,0);status tidak aktif dari tautan yang ditargetkan menyelesaikan masalah.

Michael Johnston

1

Hanya ingin menambahkan bahwa menggunakan webkit-tap-highlight-color: nonetidak tidak bekerja. Anda sebenarnya harus mengatur transparansi melalui rgba(0,0,0,0).

matthewpavkov

Answer 5

73