iPad Safari: как отключить эффект быстрого мигания при нажатии на ссылку

Есть ли способ отключить это?
Я имею в виду только в браузере ... Когда вы нажимаете ссылку, кнопку или div, который имеет функцию щелчка по нему, он мигает серым квадратом, в котором вы быстро щелкнули. Как мне предотвратить это?

ipad mobile-safari

— кошка
источник

Зачем тебе это нужно? Это значит, что пользователь знает, что он действительно что-то активировал ... это очень полезно.

— Fosco

В принципе, у меня есть div поверх большого изображения. Когда они дважды щелкают по нему, он увеличивается (я отключил опцию масштабирования по другим причинам), а когда вы щелкаете по нему один раз, панель инструментов появляется или исчезает. Поскольку этот div прозрачен, я не хочу, чтобы он мерцал каждый раз, когда они нажимали на него. Однако я держу его на большинстве других кнопок.

— cat

Ответы:

217

Вы можете установить прозрачный цвет для -webkit-tap-highlight-colorсвойства этого элемента.

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

— Kennytm
источник

то есть:-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на все (т.е. *) работала как шарм.

— Чарли

Чарли. Проблема, которую вы видите, заключается в том, что Webkit, кажется, на короткое время применяет цвет выделения к элементу, когда он становится неактивным. Вместо того, чтобы устанавливать подобное глобальное правило, -webkit-tap-highlight-color: rgba(0,0,0,0);проблему решает добавление к неактивному состоянию целевой ссылки.

— Майкл Джонстон

Просто хочу добавить , что использование 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, о которой мне нужно беспокоиться?

— Стерлинг Борн,