Как убрать двойной клик по ссылке на iOS?

Question

Такой вопрос. На сайте есть кнопки на которых есть псевдоэлемент :hover. iOS реагирует на данный псевдоэлемент и по первому клику отображает hover эффект, а по второму клику уже переходит на нужную страницу.

Как сделать, что бы не было необходимости кликать дважды?

Answer 1

Традиционное решение задачи выглядит как-то так:

if (!('ontouchstart' in document.documentElement)) {
  document.documentElement.classList.add('no-touch');
}

.no-touch button:hover {
  /* стили по ховеру, которые не будут работать на touch-устройствах */
  color: red;
}

<button>Кнопка</button>

Answer 2

Собственно, может кому-нибудь пригодится.

В iOS заложен функционал, который сперва показывает анимацию, :hover или псевдоэлементы :before и :after.

По этому, что бы убрать двойной клик на iOS необходимо:

Применить подход написал Alexey Vladimirov чуть выше. Таким образом убрать с ссылок или кнопок всю анимацию;
Проверьте, нет ли на ссылках свойств transition или псевдоэлементов :before и :after;
Учитывайте тот момент, что использование библиотек с анимацией, как в моем случае это был aos.js - то он способствует наследованию или присвоению анимационных свойств transition.

Более подробная инфа есть на англоязычной версии сие портала.

Надеюсь сэкономлю кому-нибудь время на поиски решения этой ерунды:)

БЛОГ НА HUSL

Как убрать двойной клик по ссылке на iOS?

Ответы (2 шт):