Links have gray background when pressed on iOS

Design help General
#1

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

ezgif-5-5333b1b476-min
ezgif-5-5333b1b476-min.gif600×1300 1.88 MB

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

#2

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
#3

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.

#4

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.