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 highlight | highlight remains when you type into search field | after tapping X, search has highlight |
- When you close an overlay (e.g. Talk) the highlight remains on the hamburger menu.
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; } `