@Volker_E FYI

Is the idea is to do this for all WebKit browsers?
The description suggests Android would behave differently from iOS which I will push back aggressively at if it incurs tech debt (although active state seems promising if that doesn't impact ios)

We should clarify expected behaviour for iOS and Android to make sure we get the desired result this time.

Can we update the description?

@Jdlrobson it'd be great to have a consistent experience for all WebKit browsers. It seems like iOS WebKit browsers handle this stuff differently from Android WebKit browsers, which is causing the issue here. We currently have a design backlog ticket for a more comprehensive audit (T189147), however my thinking was that in the meantime we could get rid of the aqua situation on Android.

I updated the description with Expected/Actual Behavior. Let me know if that works.

Provided we can rely on :active, this is ready for estimate.

Alrighty, so... from my testing on browser-stack, it looks like setting the :active state still produces the aqua color on Android

a:active {
    -webkit-tap-highlight-color: transparent;
}

It looks like the only way to effect the color is to set it on an element selector, like it was before.

body {
    -webkit-tap-highlight-color: transparent;
}

However, since we don't want to reintroduce T188043) why don't we set it to something like rgba(0,0,0,0.2)?

body {
    -webkit-tap-highlight-color: rgba(0,0,0,0.2);
}

This would effect both Android and iOS, but on Android, the links would also turn yellow when tapped, like in the screen capture below.
https://drive.google.com/file/d/1Qh9gubA-kURmn1ID2cZT-KNo5Nmih449/view?usp=sharing

Upon further testing, I realized that setting the tap-highlight on the :active state is only buggy on Android 4.x and below, and then, only with the built-in "Internet" or Samsung Browser.
I wasn't able to test on Android 5.x, but on Android 6, all browsers, including Samsung, successfully suppress the blue highlight with the proposed CSS.

Change 427872 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Removing aqua-colored tap highlight on android

https://gerrit.wikimedia.org/r/427872

As commented on by @Volker_E in https://gerrit.wikimedia.org/r/#/c/427872/
removing the tap-highlight for android by targeting anchor tags like this:

a:active {
    -webkit-tap-highlight-color: transparent;
}

would also remove the tap-highlight on elements that might need it, such as buttons etc. To be on the safe side here, I think we should just unify the tap-highlight color on iOS and Android.

body {
    -webkit-tap-highlight-color: rgba(0,0,0,0.2);
}

I've applied this to staging. @alexhollender can you test on iOS and Chrome and check the behaviour?

@Jdlrobson looks great. Just tested:

iOS
Chrome — ✓ no change from production
Safari — ✓ no change from production

Android
Chrome — ✓ aqua is gone, replaced by gray
UC Browser — ✓ aqua is gone, replaced by gray
Samsung device browser — ✓ aqua is gone, replaced by gray

Change 427872 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Removing aqua-colored tap highlight color for links on android

https://gerrit.wikimedia.org/r/427872

@Jdlrobson confirmed this works on beta cluster.

iOS
Chrome — ✓ no change from production
Safari — ✓ no change from production

Android
Chrome — ✓ aqua is gone, replaced by gray
UC Browser — ✓ aqua is gone, replaced by gray
Samsung device browser — ✓ aqua is gone, replaced by gray

Working for me on a few devices.

Acceptance criteria should be updated to reflect, we're fine with light gray.