iOS Checkbox focuses then selects

Only on iOS safari - when you click one of my checkboxes, it goes to this focus/hover state and then if you click again it then selects. So as a result, in order to select you must double click the checkbox. My checkboxes are setup with the label wrapped around the input and checkbox label text. Any idea how to prevent this focus state from appearing?

Here is my markup:

<fieldset class="spirit-form__checkbox-group" role="group">
  <legend class="form__checkbox-group-label">
    ...
  </legend>

  <label class="form__checkbox" for="box1">
    <input name="interests_1" id="box1" type="checkbox" class="checkbox-input" value="1">
    <span class="form__checkbox-inner">
      <span class="form__checkbox-visual">
        <svg...></svg>
      </span>

      <span class="form__checkbox-label">
          ...
      </span>
    </span>
  </label>
  ...
</fieldset>