Fixing CSS Tap Effects on iOS

While working on a simple menu icon I came across an issue that was bugging me on iOS. My component has a simple :hover effect where it changes colors, which is a great little UX indicator that the component is interactive when your mouse hovers over it. But when I'm on iOS there are a couple of problems when I tap my component:

1. There is a subtle gray highlight effect when I tap on the component
2. The component stays the :hover color after I tap on it until I tap somewhere else

Both issues can be seen here:

The default tap effects just makes my web component feel very much "web" and not so much native-feeling.

Thankfully both issues can be fixed, and best of all, both issues can be fixed in CSS - no Javascript hacks required!

For the first issue, my friend pointed out that he encountered the same issue when working on InstaChef. He told me there is a special webkit CSS property that I can set.

.menu-icon {
  -webkit-tap-highlight-color: transparent;
}

For the second issue, you can use the hover media query. As of November 2018 not all browsers support the hover media query, but at least Safari does and that's what I care about, so I simply set any hover CSS in a media query like so:

@media (hover: hover) {
  .menu-icon:hover {
    opacity: var(--wc-menu-button-hover-opacity, 0.75);
  }
}

And the finished result looks a lot more like a native button interaction, and a lot less like a 2000's web button interaction.