iPad Safari: Cara menonaktifkan efek berkedip cepat saat tautan dipukul

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

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

— Fosco

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

Jawaban:

217

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

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

— kennytm
sumber

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

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

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

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

— matthewpavkov

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

— harum
sumber

Apakah ada versi Mozilla yang perlu saya khawatirkan?

— Sterling Bourne