iPad Safari: วิธีปิดใช้งานเอฟเฟกต์การกะพริบอย่างรวดเร็วเมื่อมีการกดลิงค์

มีวิธีใดบ้างที่จะปิดการใช้งานดังกล่าว?
ฉันหมายถึงในเบราว์เซอร์เท่านั้น ... เมื่อคุณคลิกลิงก์หรือปุ่มหรือ div ที่มีฟังก์ชันการคลิกมันจะกะพริบกล่องสีเทาที่คุณคลิกอย่างรวดเร็ว ฉันจะป้องกันสิ่งนี้ได้อย่างไร?

ipad mobile-safari

— แมว
แหล่งที่มา

ทำไมคุณถึงต้องการ? ดังนั้นผู้ใช้จึงรู้ว่าพวกเขาเปิดใช้งานบางอย่างจริงๆ ... มีประโยชน์มาก

— Fosco

โดยทั่วไปฉันมี div อยู่ด้านบนของรูปภาพขนาดใหญ่ เมื่อคลิกสองครั้งมันจะซูมเข้า (ฉันได้ปิดใช้งานตัวเลือกการซูมด้วยเหตุผลอื่น) และเมื่อคุณคลิกหนึ่งครั้งแถบเครื่องมือจะปรากฏขึ้นหรือหายไป เนื่องจาก div นี้โปร่งใสฉันจึงไม่ต้องการให้มันสั่นทุกครั้งที่คลิก อย่างไรก็ตามฉันเก็บไว้ที่ปุ่มอื่น ๆ เกือบทั้งหมด

— แมว

คำตอบ:

219

คุณสามารถกำหนดสีโปร่งใสให้กับ-webkit-tap-highlight-colorคุณสมบัติขององค์ประกอบนั้นได้

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

— kenny ™
แหล่งที่มา

เช่น:-webkit-tap-highlight-color: rgba(0,0,0,0);

— CrazyTim

เยี่ยมมากขอบคุณ ฉันเพิ่มลงในคอนเทนเนอร์ div ซึ่งครอบคลุมแอพมือถือของฉัน แต่สมมติว่าคุณสามารถเพิ่มลงในองค์ประกอบของร่างกายเช่นนี้ได้เช่นกัน: body {-webkit-tap-highlight-color: rgba (0,0,0,0); }

— B-Money

สำหรับบันทึกแอปที่ฉันสร้างใน Phonegap ยังคงมีการกะพริบสั้น ๆ เมื่อแตะที่องค์ประกอบและเห็นได้ชัดว่าทำให้ฉันสะดุด การตั้งค่า-webkit-tap-highlight-color:transparentทุกอย่าง (กล่าวคือ*) ทำงานได้อย่างมีเสน่ห์

— Charlie

Charlie - ปัญหาที่คุณพบคือเนื่องจาก Webkit ดูเหมือนจะใช้สีไฮไลต์กับรายการในช่วงสั้น ๆ เมื่อไม่มีการใช้งาน แทนที่จะตั้งกฎส่วนกลางแบบนั้นการเพิ่ม-webkit-tap-highlight-color: rgba(0,0,0,0);สถานะไม่ใช้งานของลิงก์เป้าหมายจะช่วยแก้ปัญหาได้

— Michael Johnston

แค่อยากจะเพิ่มว่าการใช้webkit-tap-highlight-color: noneไม่ได้ผล คุณต้องตั้งค่าความโปร่งใสผ่านrgba(0,0,0,0).

— matthewpavkov

การใช้ Safari บนมือถือใน Phonegap สิ่งนี้ใช้ได้ผล:

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

ที่มา: ภาพเคลื่อนไหว CSS ของ iPhone WebKit ทำให้เกิดการสั่นไหว

นอกจากนี้บนแผงควบคุมหลักให้เปิดใช้งานการแสดงผล:

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

ที่มา: ป้องกันการกะพริบในการเปลี่ยน webkit ของ webkit-transform

— แดง
แหล่งที่มา

มีเวอร์ชัน Mozilla ที่ฉันต้องกังวลหรือไม่?

— Sterling Bourne