Skip to content

Add appearance mixin and fix input border on iOS and iPadOS

Vitaly Slobodin requested to merge vs-add-appearance-mixin into master

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

Merge request reports