<Inputs> missing border on Firefox when zoom out (<100%)

kiwicom / orbit

React components of open-source Orbit design system by Kiwi.com

https://orbit.kiwi

MIT License

1.39k stars 151 forks source link

<Inputs> missing border on Firefox when zoom out (<100%) #708

Open xtursky opened 5 years ago

xtursky commented 5 years ago

Expected Behavior

Border should be visible

Current Behavior

On Firefox when I zoom out (<100%) border of orbit Input components is not visible (lost)

Possible Solution

No idea.

Steps to Reproduce

Can be seen here on Firefox with zoom 90% for example.

input_ff_missing_border

vepor commented 5 years ago

It's a problem of rendering box-shadow: inset in Firefox on Windows. There is no possible fix for it, as we use box-shadow: inset 2px ... for focus states. I would close this, for now @darkwindcz and check this issue whenever we redefine focus states for components.

vepor commented 5 years ago

Problems with rendering box-shadow: inset appears also in Edge, when zoomed out. microsoft edge 2019-02-15 10 54 39