Мгновенная обратная связь с кнопкой Chrome Android

Я создаю простое мобильное приложение с Cordova. Для хорошего пользовательского опыта я хотел бы иметь мгновенную обратную связь всякий раз, когда пользователь нажимает кнопку. Это должно быть выполнено с помощью псевдокласса :active. В основном это работает, но не совсем «мгновенно».

См. jsbin здесь.

  • В десктопном Chrome нажатие на кнопку производит абсолютно мгновенную обратную связь, без вопросов.
  • В Chrome для Android быстрое нажатие кнопки кажется довольно быстрым, но медленное нажатие или удержание кнопки вызывает задержку (это может быть трудно заметить, но оно есть, и это меня беспокоит).

Я думаю, что это как-то связано с прокруткой. Если вы зайдете в настройки Android, там будет прокручивающийся список опций. Эти параметры, кажется, выделяются с аналогичной задержкой. Однако любые встроенные кнопки Android, которые не находятся в списке прокрутки, работают абсолютно мгновенно (например, кнопка «Назад» в правом верхнем углу или «Сохранить/отменить» во всплывающем диалоговом окне).

Есть ли способ убедить Chrome, что эти кнопки не находятся ни на какой панели прокрутки и должны быть просто выделены мгновенно?

Это, вероятно, не связано, но я также заметил, что удерживание кнопки html выделяет ее, но затем перемещение пальца (все еще внутри кнопки) приводит к исчезновению выделения. Это не соответствует поведению нативных кнопок Android, которые остаются подсвеченными, пока вы остаетесь внутри кнопки.

Изменить: я должен добавить, что -webkit-tap-highlight-color (который работает только с cursor: pointer) немного быстрее, чем :active, но это неприемлемое решение по нескольким причинам:

  1. Выделение исчезает, если вы удерживаете кнопку более одной секунды
  2. Это конфликтует с :active - чтобы получить разумные результаты с -webkit-tap-highlight-color, вам нужно удалить :active, что не имеет смысла.
  3. Невозможно контролировать размер/форму выделения, которое может не соответствовать фактической кнопке (иногда она кровоточит по краю или имеет несоответствующие закругленные углы).

Правильный HTML-способ решения этой проблемы — :active, и я хотел бы использовать его, если это вообще возможно.


button css user-experience mobile-webkit
person SystemParadox    schedule 26.07.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, лучший способ решить эту проблему - прослушивать события касания и устанавливать класс:

$('button').on('touchstart', function(e){
    $(this).addClass('active');
});

$('button').on('touchend', function(e){
    $(this).removeClass('active');
});

Чтобы это было тесно связано с псевдоклассом :active, я решил использовать класс active и добавить стили для обоих, например:

button:active, button.active {
    // active style
}

Для получения дополнительной информации см.: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

person SystemParadox    schedule 04.08.2016