| matmarex | |
| Mar 10 2020, 1:35 PM |
| F31674246: trim.01A9E1D4-6E9C-4120-9AB3-457E724F604D.MOV | |
| Mar 10 2020, 1:35 PM |
Vector search box changes shape / flashes when focussed on iOS Safari.
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;
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Fix iOS Safari searchbox appearance | mediawiki/skins/Vector | master | +6 -3 |
Change 578572 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Fix iphone safari searchbox rounding error
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