IOS требует двойного касания для простого элемента ссылки

Если вы нажмете элемент на iOS, браузер запускает события mouseover/mousemove и отображает стили :hover. Если он обнаруживает "изменение контента" в этом процессе, событие клика не запускается, и вам нужно снова нажать, чтобы запустить событие клика. Это описано на developer.apple.com.

У меня возникла проблема на веб-странице, где было обнаружено "изменение контента", даже если не были применены никакие события мыши или стили :hover. Это заняло некоторое время, но я смог уменьшить веб-страницу до небольшого тестового примера:

<style>
    a:hover { color: red }
    foo + * { color: red }
</style>
<a href="about:blank">foo</a>
<input type="search">

На этой странице вам нужно нажать два раза по ссылке "foo" для навигации. Протестировано с iPad mini и iPhone (как на родном, так и на симуляторе).

После этого я нашел это сообщение в блоге с аналогичной проблемой. Но единственным исправлением, которое работает для моей проблемы, является следующий CSS:

input[type=search]::-webkit-search-cancel-button {
    display: none;
}

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

Есть ли другой способ обхода проблемы?

Я отправил эту ошибку на bugreport.apple.com несколько дней назад, без реакции яблока до сих пор. Эта ошибка, похоже, находится в iOS 6 и 7, и было бы здорово, если она будет исправлена ​​в какой-то день.

Как узнать, является ли это веб-сайтом или ошибкой iOS?

Где подходящее место для сообщения об этой ошибке?

UPDATE

Эта ошибка, похоже, исправлена ​​в iOS 8. Протестировано с iPad mini и iPhone (как на родном, так и на симуляторе).

ОБНОВЛЕНИЕ 2

Ошибка не была полностью исправлена ​​в iOS 8, она по-прежнему появляется, если вы поместите некоторый CSS между фигурными скобками, например. color: red. Я обновил тестовый пример, чтобы показать ошибку также в iOS 8.

ОБНОВЛЕНИЕ 3

Ошибка в iOS 9 не исправлена, но реакция bugreport.apple.com по-прежнему отсутствует, кроме "ведет себя как предполагалось".

Ответы

Ответ 1

Я бы отключил эффект наведения для сенсорных устройств как общее правило.

Хитрость заключается в том, чтобы позволить устройствам, которые могут касаться, но там, где прикосновение не используется для получения эффектов зависания.

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

То, что я использую, - это простой script, который удаляет класс на теле всякий раз, когда происходит событие touchstart.

Итак, я начинаю с тела, которое получило класс no-touch

<body class="hoverok">

А затем добавьте следующее как javascript, чтобы удалить этот тег на первом сенсорном экране:

(function () {
 function antitouch() {
  if (!('addEventListener' in window)) {
   return;
  }
  var bodyElement = document.querySelector('body');
  function touchStart () {
   document.querySelector('body').classList.remove('hoverok');
   bodyElement.removeEventListener('touchstart', touchStart);
  }
  bodyElement.addEventListener('touchstart', touchStart);
 }
 if (window.addEventListener) {
    window.addEventListener('DOMContentLoaded', antitouch, false);
  } else {
    window.attachEvent('onload', antitouch);
  }
}());

И затем, наконец, измените селектор css на только если класс touchok находится на теле.

Я не тестировал его с вашими вещами, но это заставило бы навести курсор на a, и это должно сделать так, чтобы двойная вкладка никогда не срабатывала.

например:.

.hoverok a:hover {
  color:red;
}

Ответ 2

Я столкнулся с аналогичной проблемой при переключении состояния отображения 2 изображений при наведении:

.element__color-primary:hover { display: none; }
.element__color-secondary:hover { display: block; }

Устройства Android отлично работали.

Использование медиа-запросов для применения эффектов зависания только на больших экранах было быстрым и простым исправлением, которое я реализовал. В моем случае это не ухудшило пользовательский интерфейс.