Custom checkbox/radio focus outline misplaced in Firefox

[Macsch15]

Custom checkbox on "focus" state:

Windows 10 x64 (1607)
Firefox 48.0.2
Bootstrap 4 Alpha 3

In *-webkit browsers is fine.

PS: This issue is also in Radios

[bardiharborow]

Interestingly, I get no :focus border at all on Mac 10.11.5 Firefox 49.0b7, but it works perfectly on Mac 10.11.5 Chrome 53.0.2785.80.

[mdo]

In Edge and IE11 I'm seeing this as well, and it's due to some aggressive rounding of rem unit values there. Funnily enough there's that PR about the percentages and rounding in IE11, but never saw an issue there. This is the first time I'm seeing overzealous rounding.

Rather than try to deal with that, I'm moving to pixel units for this shadow/focus style. It's not infinitely scalable, but should get the job done without the side effects.