Page MenuHomePhabricator

Vector search box changes shape / flashes when focussed on iOS Safari
Closed, ResolvedPublic

Description

Problem

Vector search box changes shape / flashes when focussed on iOS Safari.

Solution

https://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding/12096653#12096653
-webkit-appearance: none;

Then Firefox needs another rule (acts on the -webkit-... rule too):
-moz-appearance: textfield;

Event Timeline

We don't actively support ios for vector (yet) so low seems appropriate.

Change 578572 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Fix iphone safari searchbox rounding error

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

The user agent's styling competes with the custom border-radius rule.
That rule is set regardless of :focus state, therefore this seems to be a browser bug.
If the stackoverflow article's solution does not fix it:
https://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding/12096653#12096653
then a more specific selector or !important on the border-radius rule might.

@matmarex Could you test the patchdemo that changes -webkit-appearance to none?
http://patchdemo.wmflabs.org/wikis/12cfe9284647aea9b7b27da6a1017731/w/

-webkit-appearance: none would backfire in Firefox, see T218977 for a better x-browser solution.

Change 578572 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Fix iOS Safari searchbox appearance

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

Sweeping into sprint for visibility on merged change in case QA is needed.

Demian claimed this task.