Как убрать задержку до добавления класса :active к кнопке на мобильном телефоне? ⇐ Html

[Anonymous]

На сенсорных экранах при нажатии происходит задержка около 300 миллисекунд, пока к кнопке не будет применен стиль :active. Это приводит к зависанию реакции.
В приведенной ниже демонстрации я добавил код JavaScript для измерения задержки, но проблема видна и без использования JavaScript.

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('button')
const log = document.getElementById('log')

let touchStartTime = null
button.addEventListener('touchstart', function() {
touchStartTime = Date.now()
})

let wasActive = false
window.setInterval(function() {
const isActive = window.getComputedStyle(button).backgroundColor == 'rgb(255, 0, 0)'
if (isActive && !wasActive) {
if (touchStartTime == null) {
log.innerHTML += 'No touchstart event received; are you using a touch screen?\n'
} else {
const delay = Date.now() - touchStartTime
log.innerHTML += `Activation delay: ${delay}\n`
touchStartTime = null
}
}
wasActive = isActive
}, 5)
})

Код: Выделить всё

* {
touch-action: none;
}

button {
background-color: #aaffdd;
font-size: 500%;
}

button:active {
background-color: #ff0000;
}

Код: Выделить всё

Press me

Думаю, я сделал все необходимое для устранения задержек:

• установил сенсорное действие: нет; для всех элементов
• установил ширину=device-width в мета-теге области просмотра.

Пробовал с Chromium 98 для настольных компьютеров (мобильная эмуляция в инструментах разработчика), а также Chrome на Android. То же самое происходит в Firefox 97, но только если я включу эмуляцию сенсорного экрана. Поэтому я думаю, что это соответствует спецификации, а не проблеме браузера.
Конечно, я могу добавить немного JavaScript для прослушивания событий touchstart или pointerdown и добавить свой собственный класс .active. Но я хотел бы, если возможно, стремиться к решению, отличному от JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/716 ... -on-mobile