5

On touch screens, when tapping a <button>, there is a delay of about 300 milliseconds until the :active style is applied to the button. This results in an unresponsive feeling.

In the demo below, I've added some JavaScript code to measure the delay, but the issue is visible without any JavaScript as well.

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;
}
<html>
  <head>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <button id="button">Press me</button>
    <pre id="log"></pre>
  </body>
</html>

I think I've done all the things I need to remove delays:

  • set touch-action: none; on all elements,
  • set width=device-width in the meta viewport tag.

Tried with Chromium 98 on desktop (mobile emulation in developer tools), as well as Chrome on Android. The same happens in Firefox 97 but only if I enable touch emulation. So I think it's according to spec, and not a browser issue.

Of course I can add some JavaScript to listen for touchstart or pointerdown events and add my own custom .active class. But I'd like to aim for a non-JavaScript solution if possible.

1
  • Very frustrating to see this still doesn't have a pure CSS solution. While asking around about it, I made a JSFiddle variant of your example that visually shows the touchstart event is fired nearly instantly, and it is just the CSS active state that is delayed (helpful for screen recordings and whatnot): jsfiddle.net/ZMYaro/6ktucypr Commented Jan 25 at 22:02

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.