Disabling mobile Safari tap highlight colour

by graham

-webkit-tap-highlight-color

This webkit only CSS property is available on mobile Safari in both iOS and Android. It allows you to override the yellow highlight colour when a user taps a link or JavaScript clickable element. 

This is a useful accessibility feature that lets users know a link or clickable action has been touched rather than just tapping on the main content area (as you would to scroll the page). 

Occasionally this can interfeer with the design of a page, such as an image gallery, where the tap is more obvious and the change instant. To disable to tap highlight use the CSS:

-webkit-tap-highlight-color: rgba(0,0,0,0);

Where the important part is setting the opacity to zero (and therefore hiding the effect). 

Add comment

All comments are subject to moderation before being added to prevent spam.

This means that it may take a while for your comment to appear (I'm not online every day). Your e–mail address won't be published but a made up email address isn't polite and flags as spam.

Comments will not be approved if you use a keyword instead of a name or if any linked sites are commercial in nature and not related to the design/tech industries, or if the comment simply doesn’t add substance to the discussion.

Constructive comments relating to demos, such as potential bugs, are better placed via the contact form.


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading