iPad Safari : 링크가 연결되었을 때 빠른 깜박임 효과를 비활성화하는 방법

그것을 비활성화하는 방법이 있습니까?
내 말은 브라우저에서만 ... 링크 나 버튼 또는 클릭 기능이있는 div를 클릭하면 빠르게 클릭 한 곳에서 회색 상자가 깜박입니다. 이것을 어떻게 방지합니까?

ipad mobile-safari

— 고양이
소스

왜 그러고 싶니? 사용자가 실제로 무언가를 활성화했음을 알게되므로 매우 유용합니다.

— Fosco

기본적으로 큰 이미지 위에 div가 있습니다. 두 번 클릭하면 확대됩니다. (다른 이유로 확대 / 축소 옵션을 비활성화했습니다) 한 번 클릭하면 도구 모음이 표시되거나 사라집니다. 이 div는 투명하기 때문에 클릭 할 때마다 깜박이지 않게합니다. 그러나 나는 대부분의 다른 버튼에 유지하고 있습니다.

— cat

답변:

216

해당 요소 의 -webkit-tap-highlight-color속성 에 투명 색상을 설정할 수 있습니다.

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

— 케니 TM
소스

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

— CrazyTim

고마워요. 내 모바일 앱을 포함하는 컨테이너 div에 추가했지만 다음과 같이 body 요소에도 추가 할 수 있다고 가정합니다. 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 2014 년

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 버전이 있습니까?

— Sterling Bourne