Unwanted Tap Highlight Flash

The Problem

On iOS, every tappable element — buttons, links, anything with a click handler — gets a brief translucent grey highlight when tapped. On standard blue links it's mostly unnoticeable, but on custom-styled buttons it looks like a dark flash or broken opacity animation.

Root Cause

WebKit applies a default -webkit-tap-highlight-color to all clickable elements via its User Agent stylesheet. The default value is a semi-transparent grey (rgba(0,0,0,0.18) approximately), which appears as a dark flash over the element on tap.

This is an intentional iOS UI convention — it provides visual feedback that a tap registered. But it ignores any custom :active or :focus styles you've set, creating a double-feedback problem with custom-designed components.

Fix — Remove the highlight, add your own :active

/* Step 1: Remove the default tap highlight globally */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Or target only interactive elements */
button,
a,
[role="button"],
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

/* Step 2: Replace with your own :active feedback */
button:active {
  opacity: 0.75;
  transform: scale(0.98);
  transition: transform 0.1s, opacity 0.1s;
}

a:active {
  opacity: 0.7;
}

Custom Highlight Colour

Instead of removing it entirely, you can set a custom colour — your brand's accent colour at low opacity makes tap feedback feel intentional rather than broken.

/* Brand-coloured tap feedback instead of grey */
button,
a {
  -webkit-tap-highlight-color: rgba(10, 132, 255, 0.15);
}

Browser Support

Further Reading

• MDN: -webkit-tap-highlight-color
  Reference page for the non-standard CSS property that controls the tap highlight.
• CSS-Tricks: iOS tap highlight color
  Quick snippet and explanation for removing the default iOS tap highlight.