Page MenuHomePhabricator

Vector: Simple search needs to provide standard appearance
Open, Needs TriagePublic

Description

Search input doesn't follow standard input behaviour, resulting for example in no clear visual focus feedback:

Event Timeline

Volker_E created this task.Jun 7 2019, 9:07 PM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptJun 7 2019, 9:07 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 515176 had a related patch set uploaded (by Isarra; owner: VolkerE):
[mediawiki/skins/Vector@master] SimpleSearch: Standardize input appearance

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

Change 515176 merged by jenkins-bot:
[mediawiki/skins/Vector@master] SimpleSearch: Standardize input appearance

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

SerDIDG added a subscriber: SerDIDG.Jul 2 2019, 8:52 PM

Additionally, some visual bugs appeared in iOS Safari (12.3.1):



Need to change css styles from -webkit-appearance: textfield; to -webkit-appearance: none;.

Volker_E added a comment.EditedJul 11 2019, 6:21 PM

@SerDIDG Hi, on iOS 11/12 Safari does show the right treatment:


On rather old versions like iOS 9 Saf it shows the treatment as outlined by you.

Not sure though if this shouldn't be a 'wontfix' as we might end up with side-issues in other browsers/OS when putting the appearance to none.
A textfield assigned field might get different keyboard treatment for example…

@Volker_E I will duplicate the message I left in the patch, I apologize for this :( Are you sure about transparent color for <input>? This color interrupts the color above and it turns out that the search bar will be gray. And because of this, the text color of the placeholder has bad contrast with the background.