Подсветка области клика на iOS

Когда пользователь прикасается к ссылке или элементу, для которого указан обработчик клика, то Safari на iOS подсвечивает этот элемент.

Цвет этой подсветки задается с помощью CSS свойства -webkit-tap-highlight-color.

Свойству можно задать любой цвет, в том числе и с прозрачностью. Это невероятно полезно, чтобы скрыть эту подсветку для блоков, которые обрабатывают события своих дочерних элементов.

Предположим, что нас интересует только клик по элементу с классом item__add.

$(".list").on("click", ".item__add", function () { … });

Но подсветка будет активироваться у элемента с классом list, так как именно на него повешен обработчик события. Исправим это CSS свойством в селекторе .list.

.list {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}