Page MenuHomePhabricator

ICONS: tap/active state remains after tapping button
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

This is an iPhone-only issue. Sometimes the touch highlight lingers on certain elements. Examples:

  • When you tap on the search icon the highlight remains on the X. Then after tapping on the X the highlight remains on the search icon.
after tapping search, X has highlighthighlight remains when you type into search fieldafter tapping X, search has highlight
IMG_0241.PNG (1×750 px, 80 KB)
IMG_0239.PNG (1×750 px, 94 KB)
IMG_0240.PNG (1×750 px, 106 KB)
  • When you close an overlay (e.g. Talk) the highlight remains on the hamburger menu.

IMG_0261.PNG (1×750 px, 89 KB)

Acceptance criteria

  • Use ":active" not ":hover" for the gray background focus state.

Developer notes

The background is coming from mw-ui-icon:hover
When you click the search icon, the phone remembers the last place you touched and therefore hovered.
The new close icon is in that position, so the hover applies to the new icon.
We should be using the active state NOT hover.

mw-ui-icon-element:active { background-color: red; }
`

Event Timeline

ovasileva triaged this task as Medium priority.Sep 17 2019, 8:20 AM

I don't know how to fix this. iOS seems to remember where you last clicked and focus any element in that area. Possibly a browser bug?

So I debugged this. @Jdrewniak was there any reason we used :hover rather than :active ?
If not, the solution is pretty clear.

Change 548442 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Icon background should disappear on touch devices after click

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

Change 548442 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Icon background should disappear on touch devices after click

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

Macro cathug: it's fixed

tap X on search overlayno lingering highlight on search icon
IMG_0005.PNG (1×750 px, 84 KB)
IMG_0006.PNG (1×750 px, 125 KB)
ovasileva claimed this task.

Yay! Resolving.