Page MenuHomePhabricator

Aqua touch feedback on Android is distracting
Closed, ResolvedPublic2 Story Points

Description

Issue

As the result of removing -webkit-tap-highlight-color: transparent (see T188043), Android's default highlight color of aqua is now showing up quite prominently in mobile web (it appears when tapping links, collapsable sections, menu items, buttons, icons, and more). This was an oversight on my part while testing.

Steps to reproduce

  1. Go to https://en.m.wikipedia.org/wiki/Main_Page on an Android device
  2. Tap on some links, images, section titles, nav items

(here is a screen recording, although the aqua is much brighter in real life)

Expected Behavior

  • Tappable elements show
    1. text changing colors (for links) (we can call this optional for the scope of this ticket)
    2. a background highlight of transparent gray

Actual Behavior

  • Tappable elements show
    1. text changing colors (for links) (we can call this optional for the scope of this ticket)
    2. a background highlight of aqua (Android only)

Environments

  • Samsung Galaxy S6, v7.0
  • Chrome (latest)

Acceptance criteria

  • Restore -webkit-tap-highlight-color: transparent` should be light gray for all browsers.

Testing

  • Please test this change on the beta cluster
  • iOS (Safari + Google Chrome) should have the same behavior as production
  • Android (Google Chrome + UC Browser) should have the expected behavior described above

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 13 2018, 9:45 PM
ovasileva triaged this task as Normal priority.Mar 14 2018, 3:32 PM
Jdlrobson added a subscriber: Jdlrobson.

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.

Jdlrobson updated the task description. (Show Details)Mar 27 2018, 3:40 PM

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

ovasileva set the point value for this task to 2.Mar 27 2018, 4:37 PM
ovasileva moved this task from Upcoming to 2017-18 Q3 on the Readers-Web-Backlog board.
Jdrewniak moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.

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

Jdlrobson added a subscriber: ABorbaWMF.

Hang on alex. Let me merge the change now, then I'll pass it back to you to double check the merge went okay :)

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 updated the task description. (Show Details)

Hey!
This time please check on the beta cluster: https://en.m.wikipedia.beta.wmflabs.org
Note it may take up to 30 minutes for the change to appear there.

Move to QA and assign to Anthonywhen you've confirmed this works on the beta cluster.

@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

alexhollender updated the task description. (Show Details)

Working for me on a few devices.

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

Jdlrobson updated the task description. (Show Details)May 1 2018, 10:20 PM
ovasileva closed this task as Resolved.May 2 2018, 1:56 PM
ovasileva added a subscriber: ovasileva.

looks like we're all done here. Thanks all!