Links have gray background when pressed on iOS

When pressing links on iOS, the div turns gray (see video attached)

I’m not sure if this is something webflow sets, but I’ve checked other websites and I don’t get this behaviour. I also can’t figure out how to prevent this from happening.

Any ideas?

Thanks
Kyle


Here is my site Read-Only: https://preview.webflow.com/preview/anne-whittaker?preview=5b2845ece4bbcb4b09496e22011dc62d

That’s the mobile browsers who add this tap hint.

Control it by adding custom code:

.yourElementClass {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

If you want to remove it for all links:

a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

FYI removing them is kind of breaking the rules of accessibility. Users kind of expect this behavior.

1 Like

Thanks @vincent

It’s just because I haven’t seen this before on other sites, not that I can remember anyway. So when I noticed it, it distracted me.

Now that I know what it is I might leave it on, but thanks for sending the code to remove it.

If you look closely, anything that can be tapped has a flash on mobile. it’s different among browsers and OS. If you remove it, be sure to style the Pressed state.