Custom-toggle broken on Safari

[iamDecode]

When using the custom-toggle class in Safari, the toggle knob animates out of bounds.

Expected Behavior

The toggle knob animates left (off) to right (on).

Current Behavior

On Safari the knob animates left out of the bounds of the control.

Possible Solution

This problem is in the difference in parsing left in the following snippet:

.custom-toggle .custom-control-input:checked + .custom-control-indicator:after {
  left: calc(100% - 3px);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

Using left: 95%; is a dirty way fix approximating the 3px margin, and seems to work in all browsers.

Steps to Reproduce

1. Use Safari.
2. Click toggle.

Context (Environment)

Tested on both Safari 10.0.2 (webkit 12604.4.7.1.3), and Safari Technology Preview 11.1 (release 44, webkit 12605.1.13.2). Ran on on MacOS Sierra 10.12.6.

[hisk]

This is great, thanks for your detailed submission! 😄 I'm on it!