Add appearance mixin and fix input border on iOS and iPadOS
I know that it's not good to create a merge request with two unrelated changes, but I would like to illustrate why one change is required for another.
The problem
Borders for form inputs not being drawn in mobile Safari on iOS and iPadOS due to box-shadow
with inset
option. I tried to search WebKit bug tracker but no luck.
How to fix that?
The fix is pretty simple - add appearance: none
to the input
element.
I added a new mixin called gl-appearance-none
that translates to appearance: none
with vendor prefixes. And to fix the problem with inputs, I added that mixin to .form-control
class. Adding appearance: none
does not break other browsers.
Edited by Vitaly Slobodin